不能使用react-spring(未捕获的不变量违反:无效钩子调用)

Question

import logo from "./logo.svg";
import "./App.css";
import { useSpring, animated } from "react-spring";
function App() {
  const props = useSpring({ to: { opacity: 1 }, from: { opacity: 0 } });
  return <animated.div style={props}>I will fade in</animated.div>;
}
export default App;

从上面的代码，我试图使用usesspring钩子从react-spring库，我刚刚下载使用npm i react-spring，但它似乎抛出了这个错误:

错误图像

我尝试使用其他钩子从'react'和它工作(useState, useEffect)。只是'react-spring'的钩子不起作用，所以我不知道为什么会发生这种情况。

Answer 1

我也有同样的问题。我的软件包版本如下:

"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-spring": "^9.4.4",

升级react-spring版本到9.4.5-beta.1解决了我的问题。

"react-spring": "^9.4.5-beta.1",

你也可以尝试降级react和react DOM。例如，你可以将两者都降级到17.0.2。请记住，您必须更改index.js以使用ReactDOM.render而不是ReactDOM.createRoot:

Answer 2

根据其他帖子，以下内容不适合我:

"react": "18.1.0",
"react-dom": "18.1.0",
"react-spring": "^9.4.5-beta.1",

升级React和React -spring到最新版本:

"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-spring": "^9.5.2"