useTransition is not working with my code - TypeError: Cannot read property 'text' of undefined

Question

我正在使用 React-Spring useTransition 并收到错误：

TypeError: Cannot read property 'text' of undefined

import React, { useState } from 'react'
import { useSpring, useTransition, animated } from 'react-spring'


function MyApp() {

  const [items, setItems] = useState([
    { id: 1, text: 'Item1' }, { id: 2, text: 'Item2' }
  ]);


  const transition = useTransition(items, item => item.id, {
    from: { opacity: 0, marginLeft: -100, marginRight: 100 },
    enter: { opacity: 1, marginLeft: 0, marginRight: 0 }
  })

  return (
    <>
      <div>
        {transition.map(({ item, key, props }) =>
          <animated.div key={key} style={props}>{item.text}</animated.div>
        )}

      </div>

    </>
  )
}

export default MyApp

我做错了什么？

Answer 1

我假设你在安装 react-spring 时没有指定版本，所以你现在可能正在获取 v9。 V9 对其进行了一些重大更改，不幸的是，这些更改并未反映在文档中。但一定要看看 this explanation.

总而言之，useTransition 现在完全不同了。可以将转换作为函数调用，而不是从转换映射，该函数将 return 一个您可以呈现的片段。我稍微编辑了您的代码以反映这一点：

import { useTransition, animated } from "react-spring";

function App() {
  const [items, setItems] = useState([
    { id: 1, text: "Item1" },
    { id: 2, text: "Item2" }
  ]);

  const transition = useTransition(items, {
    from: { opacity: 0, marginLeft: -100, marginRight: 100 },
    enter: { opacity: 1, marginLeft: 0, marginRight: 0 }
  });

  const fragment = transition((style, item) => {
    return <animated.div style={style}>{item.text}</animated.div>;
  });

  return (
    <>
      <div>{fragment}</div>
    </>
  );
}

export default App;

查看这个 sandbox 来尝试一下。因为它仅在首次呈现时才进行转换，所以您必须点击重新加载才能看到项目名称从左侧滑入。

useTransition is not working with my code - TypeError: Cannot read property 'text' of undefined

useTransition is not working with my code - TypeError: Cannot read property 'text' of undefined

javascript

reactjs

react-spring