javascript - Array 上的 useTransition 返回未定义的 Array 属性(React Spring)

Question

我对 React Spring 很陌生，所以当我在对象数组上使用 UseTransition 时，从它返回的值是未定义的

  const transitions = useTransition(people, (item) => item.id, {
    enter: { transform: "translateX(0rem)", opacity: 1 },
    leave: { transform: "translateX(-20rem)", opacity: 0 },
    config: { duration: 500 },
  });
  return (
    <>
      <div className="ppl-lst">
        {transitions.map(({ item, key, props }) => {
          return (
            <animated.div style={props} key={key}>
              <div className="ppl lst-name">{item.name}</div>
              <div className="ppl lst-email">{item.email}</div>
            </animated.div>
          );
        })}
      </div>
    </>
  );

指向 map 函数时出错

TypeError: Cannot read property 'name' of undefined

奇怪的是它以前在我使用 react-spring 8.0.27 时有效，现在我在使用 react-spring 9.1.2。如果我遗漏了什么，请告诉我

Answer 1

useTransition 的 API 在 v9 中发生了变化并记录在案。它应该看起来像这样:

 const transitions = useTransition(people, {
    enter: { transform: "translateX(0rem)", opacity: 1 },
    leave: { transform: "translateX(-20rem)", opacity: 0 },
    config: { duration: 500 },
  });
  return (
    <>
      <div className="ppl-lst">
        {transitions((props, item) => {
          return (
            <animated.div style={props} key={key}>
              <div className="ppl lst-name">{item.name}</div>
              <div className="ppl lst-email">{item.email}</div>
            </animated.div>
          );
        })}
      </div>
    </>
  );

有关更多信息，请参阅此处的文档 – https://react-spring.io/hooks/use-transition

另外，作为旁注，您可以像这样将 transform prop 简写为 x:

const transitions = useTransition(people, {
    enter: { x: "0rem", opacity: 1 },
    leave: { x: "-20rem", opacity: 0 },
    config: { duration: 500 },
  });

传递时不需要插值，因为 animated 组件知道如何处理这个速记。请参阅这些文档 – https://react-spring.io/basics#shorthand-style-props