Nextjs在下一个开发中抛出无效的React挂钩错误
MacOS BigSur
Node 14.15.3
React - 17.0.1
Rect Dom - 17.0.1
Next - 10.0.6
文件夹结构
/node_modules
package.json
/app
app.js
/src
/next
.next
/pages
index.jsx
....
代码以从应用程序启动服务器.js
nextServer = next({
dev: isDev,
dir: 'app/src/next',
}),
handle = nextServer.getRequestHandler();
使用节点应用程序/应用程序启动服务器时.js，页面加载正常。
但是当我运行< code >下一个开发应用/src/next或< code >下一个构建应用/src/next时。我得到无效的钩子调用错误。https://reactjs.org/docs/error-decoder.html?invariant=321
共有1个答案
我认为这是因为项目中的两个版本的反应。我通过在next.config.js中将它添加为外部来从捆绑包中排除反应。
module.exports = {
webpack: config => {
config.externals = {
react: 'react',
reactDOM: 'react-dom'
}
return config;
},
};
运行npm ls反应以查看您正在使用哪些版本的反应。
我认为这条线索可能会帮助其他人缩小他们的问题，如果其他人被困在这里。https://github.com/vercel/next.js/issues/9022
-
从 react 导入 useState，将其粘贴到正文函数，但 react 告诉我错误的使用钩子。虽然另一个钩子像这样工作。
-
太长，读不下去了如何模拟或使用带有数组的道具强制重置我的组件？ 我正在实现一个组件，它显示一个计时器，并在达到零时执行回调。目的是让回调更新对象列表。后一个组件由新的React钩子和组成。 包含对计时器启动时间和剩余时间的引用。设置每秒钟调用一次的间隔，以更新剩余的时间，并检查是否应该调用回调。 该组件并不意味着重新安排计时器，或者在间隔达到零时保持间隔，它应该执行回调并空闲。为了让计时器刷新，我
-
我是一个很新的反应，并得到以下错误： 我想在提交表单时使用另一个组件。因此，在文件A中，当表单提交时，is使用一个函数，在调用其他组件之前首先检查某些内容，如： 在组件上，我有一些usstate钩子： 当页面正在加载的时候，我得到了这个错误，有没有人知道什么是错误的？
-
错误：无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一： React和渲染器的版本可能不匹配（例如React DOM） 你可能违反了钩子的规则 同一个应用程序中可能有多个React副本请参见reactjs。org/link/invalid hook call获取有关如何调试和修复此问题的提示 ./src/index.js/ 5 |从导入reportWebVitals/报告
-
我有一个小的井字游戏，一切都很好，除了我正在努力寻找在代码中放置完成功能的位置。让我给你看； 这基本上是整个游戏，我在另一个文件中有一个整理函数，就像这样； 完成功能也可以正常工作，但是由于useState是异步工作的，我知道这一点，我正在努力把它放在哪里。如果我把点击功能放在里面，它就不能对新的状态做出反应，只能对之前的状态做出反应。如果我把外面加上只是if语句，它会说渲染太多，因为我正在设置获
-
我正努力让你去工作。以下是功能组件： 我称之为： 我得到一个错误，如下所示： 错误：无效的钩子调用。钩子只能在函数组件的主体内部调用。发生这种情况的原因如下：1。React和渲染器（如React DOM）2的版本可能不匹配。你可能违反了Hooks 3的规则。同一应用程序中可能有多个React副本。 我已经调试并确认我使用的是单一版本。也许我使用状态钩子不正确？ 这里是我调用自定义钩子的地方：