React-Spring：无效的 Hooks 调用

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

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

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

钩子在我改成之后就开始工作了

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

Answer 2

将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 我让它工作的地方