NEXT JS ver^12错误:无效钩子调用(useTransition of react-spring)

Question

我使用react-spring来创建这个HOC动画包装组件，但当运行NEXT时给出错误:违反不变式:无效的钩子调用。钩子只能在函数组件的内部调用。这可能是由于以下原因之一:

1. 你可能有不匹配的版本的React和渲染器(如React DOM)
2. 你可能违反了Hooks的规则
3. 你可能在同一个应用程序中有多个React副本

/组件/动画/Animation.js

import React from "react";
import { useSpring, useTransition, animated } from "react-spring";
export default function Animation() {
return <div></div>;
}
Animation.Fade = function AnimateFade({ children, style, ...props }) {
const arrChild = React.Children.toArray(children);
const transition = useTransition(arrChild, {
keys: (item) => item.key,
from: { opacity: 0 },
enter: { opacity: 1 },
leave: { opacity: 0 },
config: { duration: 600 },
});
return transition(
(prop, item) =>
item && (
<animated.div style={prop} {...props}>
{item}
</animated.div>
)
);
};

Answer 1

这可能是因为您正在使用react@18，而当前稳定版本的react-spring不支持此操作。目前有一个可用的测试版，应该可以工作。这里也有一个开放的问题，你可以跟踪，如果你想- https://github.com/pmndrs/react-spring/issues/1870