数组上的 useTransition 返回未定义的数组属性（React Spring）答案

【问题标题】：useTransition on Array return undefined Array propeties (React Spring)数组上的 useTransition 返回未定义的数组属性（React Spring）
【发布时间】：2021-10-08 16:15:57
【问题描述】：

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

指向地图函数时出错

TypeError: Cannot read property 'name' of undefined

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

【问题讨论】：

来自文档，react-spring.io/hooks/use-transition，似乎不是useTransition，第二个参数可以是item=>item.id。

标签： javascript arrays reactjs react-spring

【解决方案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

另外，作为旁注，您可以将您的转换道具简写为 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

【讨论】：