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

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