useTransition on Array return undefined Array propeties (React Spring)

Question

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

  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>
    </>
  );

指向地图函数时出错

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

另外，作为旁注，您可以 shorthand 您的 transform 道具只是 x 像这样：

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

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

useTransition on Array return undefined Array propeties (React Spring)

useTransition on Array return undefined Array propeties (React Spring)

javascript

arrays

reactjs

react-spring