每次单击元素时如何使转换工作

Question

我正在尝试使用 React-Spring 库中的“useTransition”和“animated”，但遇到了一个问题，即它只在第一次进行动画处理，并且不激活离开。

通过深入研究，我认为这与密钥未更新的事实有关，我认为这是使新动画能够渲染的原因，但我不知道除了刷新之外如何获取更新的密钥这页纸。

function App() {

  const [showApplicants, setShowApplicants] = useState(false);

  const [showSpecificApplicant, setShowSpecificApplicant] = useState([]);

  const [applicants, setApplicants] = useState([

    {

      firstName: "Billy",

      background: "Employed",

      id: 1

    },

    {

      firstName: "Sarah",

      background: "Employed",

      id: 2

    },

    {

      firstName: "Vera",

      background: "Student",

      id: 3

    },

    {

      firstName: "Albert",

      background: "Unemployed",

      id: 4

    }

  ]);

  const transitions = useTransition(applicants, item => item.id, {

    from: {

      transform: "translate(-100%, 0)"

    },

    enter: {

      transform: "translate(0%,0)"

    },

    leave: {

      transform: "translate(150%, 0)"

    },

    config: { duration: 3000 }

  });

  const handleApplicants = () => {

    setShowApplicants(!showApplicants);

    setShowSpecificApplicant([]);

  };

  const showDetails = (e, item) => {

    setShowSpecificApplicant(item.id);

  };

  const SpecificApplicant = () => {

    const matchedUser = applicants.find(

      user => user.id === showSpecificApplicant

    );

    return transitions.map(({ item, key, props }) => {

      return showSpecificApplicant === item.id ? (

        <animated.div key={key} style={props}>

          <div

            style={{

              background: "lightblue",

              width: "20%",

              margin: "0 auto",

              textAlign: "center",

              borderRadius: "5px",

              padding: "10px",

              display: "flex",

              flexDirection: "column"

            }}

          >

            <h3 style={{ margin: "0", padding: "0" }}>

              {matchedUser.firstName}

            </h3>

            <p> Current Status: {matchedUser.background}</p>

          </div>

        </animated.div>

      ) : null;

    });

  };

我期望每次单击申请人时都会触发动画，但它仅在第一次动画时触发。之后，他们只是正常出现。谁能告诉我我做错了什么。