NEXT JS ver^12 Error: Invalid hook call (useTransition of react-spring)

Question

我使用 react-spring 创建这个 HOC 来为包裹的组件设置动画但是当运行 NEXT 给出错误时：不变违规：无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一造成的：

您的 React 和渲染器版本可能不匹配（例如 React DOM）
您可能违反了 Hooks 规则
您可能在同一个应用程序中拥有多个 React 副本

/components/Animation/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

NEXT JS ver^12 Error: Invalid hook call (useTransition of react-spring)

NEXT JS ver^12 Error: Invalid hook call (useTransition of react-spring)

reactjs

next.js