React Spring useTransition 渲染第一个项目三次答案

【问题标题】：React Spring useTransition renders first item three timesReact Spring useTransition 渲染第一个项目三次
【发布时间】：2021-01-31 16:40:47
【问题描述】：

useTransition 有问题，控制台日志转换输出 Menu 三次，而不是 Menu1、Menu2、Menu3

Ttransition.map 也将 Menu1 渲染 3 次

const [items, setItems] = useState([{ text: 'Menu1'}, { text: 'Menu2'}, { text: 'Menu3'}]);

const transitions = useTransition(items, item => item, {
        from: { transform: 'translate3d(0,-40px,0)', opacity: '0' },
        enter: { transform: 'translate3d(0,0px,0)', opacity: '1'},
        leave: { transform: 'translate3d(0,-40px,0)', opacity: '0'},
    })

return ( 
    <Menu style={animatonmenu}>
        <ul>
        {transitions.map(({ item, props, key }) =>
            <animated.li key={key} style={props} onClick={() => setClicked(true)}>{item.text}</animated.li>
        )}
        </ul>
    </Menu>
)};

【问题讨论】：

标签： reactjs react-spring

【解决方案1】：

从documentation on useTransition 看来，问题似乎出在这部分：

const transitions = useTransition(items, (item) => item, {
    from: { transform: "translate3d(0,-40px,0)", opacity: "0" },
    enter: { transform: "translate3d(0,0px,0)", opacity: "1" },
    leave: { transform: "translate3d(0,-40px,0)", opacity: "0" }
});

你应该做(item) => item.key，而不是(item) => item。因为否则 react-spring 可能无法唯一标识每个项目。

所以你应该这样做：

export default function App() {
  const [items, setItems] = useState([
    { key: 1, text: "Menu1" },
    { key: 2, text: "Menu2" },
    { key: 3, text: "Menu3" }
  ]);

  const transitions = useTransition(items, (item) => item.key, {
    from: { transform: "translate3d(0,-40px,0)", opacity: "0" },
    enter: { transform: "translate3d(0,0px,0)", opacity: "1" },
    leave: { transform: "translate3d(0,-40px,0)", opacity: "0" }
  });

  return (
    <div className="App">
      <ul>
        {transitions.map(({ item, props, key }) => (
          <animated.li key={key} style={props}>
            {item.text}
          </animated.li>
        ))}
      </ul>
    </div>
  );
}

【讨论】：