React-Spring:无效的钩子调用

Question

我正在尝试学习React-Spring。它的文档中提供的一个代码在我运行它时抛出一个错误。你知道哪里出问题了吗？如何解决？

​

​

我要运行的代码是-

const TextContent = (props) => {

    const [items] = useState([
        { id: '0', title: 'Text1' },
        { id: '1', title: 'Text2' },
        { id: '2', title: 'Text1' }
    ])

    const [index, setIndex] = useState(0);

    const transitions = useTransition(items[index], index => index.id,
        {
            from: { opacity: 0 },
            enter: { opacity: 1 },
            leave: { opacity: 0 },
            config: { tension: 220, friction: 120 }
        }
    )

    useEffect(() => {
        const interval = setInterval(() => {
            setIndex((state) => (state + 1) % items.length);
        }, 4000)
        return () => clearInterval(interval);
    }, []);

    {
        transitions.map(({ item, props, key }) => (
            <animated.div
                key={key}
                style={{ ...props, position: 'absolute' }}
            >
                <p>
                    {item.title}
                </p>
            </animated.div>
        ))
    }
}

export default TextContent;

Answer 1

将return语句添加到功能组件

const TextContent = (props) => {

    const [items] = useState([
        { id: '0', title: 'Text1' },
        { id: '1', title: 'Text2' },
        { id: '2', title: 'Text1' }
    ])

    const [index, setIndex] = useState(0);

    const transitions = useTransition(items[index], index => index.id,
        {
            from: { opacity: 0 },
            enter: { opacity: 1 },
            leave: { opacity: 0 },
            config: { tension: 220, friction: 120 }
        }
    )

    useEffect(() => {
        const interval = setInterval(() => {
            setIndex((state) => (state + 1) % items.length);
        }, 4000)
        return () => clearInterval(interval);
    }, []);

    return (
        <div>
            {
              transitions.map(({ item, props, key }) => (
                <animated.div
                    key={key}
                    style={{ ...props, position: 'absolute' }}
                >
                    <p>{item.title}</p>
                </animated.div>
              ))
            }
        </div>
    )
}

export default TextContent;

这是我让它工作的codesandbox

Answer 2

除了Al Duncanson answer：我的问题是导出React片段而不是实际的标签：

return (
  <>
    { /* springs.map() */ }
  </>
)

钩子在我将其更改为

return (
  <div>
    { /* springs.map() */ }
  </div>
)