Question

当尝试在NextJS中使用React Hooks时，我继续收到以下错误：

只能在函数组件的主体内部调用钩子。

此问题仅在Windows上出现，并且在Mac上运行正常。

这是一个有据可查的问题，我对许多建议的解决方案都感到困扰，包括：

React或React DOM的多个版本
修改[Desktop Entry] Version=1.0 Type=Application Name=Anaconda-Designer GenericName=AnacondaDesign Exec=/bin/bash "/home/user_name/bin/designer.sh" Icon=/home/user_name/anaconda3/lib/python3.7/site-packages/anaconda_navigator/static/images/qtcreator-icon-1024x1024.png Terminal=false StartupNotify=true中的webpack设置
链接到特定的节点模块包装

以下是使用示例：

next.config.js

我正在使用以下版本：

import React, { useState, useEffect } from 'react'

const Index = () => {
   const [ test, setTest ] = useState('Test')

   useEffect(() => (
      console.log(`Page loaded, variable value: ${test}`)
   ), [])

   return <div>Hello</div>
}

Answer 1

如果仅在PC上遇到此问题，则可能与导航到项目文件夹的方式有关。确保在所有文件夹上使用正确的字符大小写！在我的场景中，我使用Powershell导航到我的项目并运行开发服务器。

例如，以下内容将导致挂钩错误：

cd desktop/project_folder

npm run dev

问题在于“桌面”是大写的目录名称。因此，通过以下步骤运行服务器非常有效：

cd Desktop/project_folder

npm run dev

如果使用不正确的大小写打开了project_folder，然后使用交互式外壳程序运行开发服务器，也会发生此问题，例如：

cd desktop/project_folder

## Open project_folder in VS Code
code .

## Start development server from VS Code's interactive shell
npm run dev

问题的根源在于，由于预期路径名的变化，我认为模块路径未正确导入。如果您看到来自开发服务器的以下警告，请确保首先解决它：

存在多个模块，只是外壳不同

挂钩错误：在Windows上使用NextJS或ReactJS的无效挂钩调用

1 个答案: