React 组件 - 无法读取 null 的属性（读取“useState”）

Question

我正在为一些在不同项目中使用的组件构建一个小型本地开发/测试/文档环境，因此希望将它们创建为单独的 npm 包。

一切都工作得很完美，直到我尝试在其中一个组件中使用

useState()

。添加此操作会产生以下错误：

Invalid hook call. Hooks can only be called inside of the body of a function component.

TypeError: Cannot read properties of null (reading 'useState')

我觉得这很奇怪，我不知道是什么原因造成的。我还用其他钩子进行了测试，看看是否只是

useState

是问题所在，但其他诸如

useEffect

和

useRef

也有同样的问题。

项目结构为：

/components (the components to develop/test/document
    /component-group
        /Component
            index.js
            Component.js
            component.scss
            package.json
/library  (where all the components are developed/tested/documented)
    /component1
    /component2
    /etc (all the components that make up the library)
webpack.config.js
package.json
etc...

组件使用相对路径导入到库中，因为我不需要将它们发布到 npm 并在每次进行更改并需要测试时在本地更新版本。

至于

useState

导致问题的组件代码，这是一个基本版本，仍然会导致问题：

import React, { useState } from 'react';

const TestComponent = () => {

    const [testState, setTestState] = useState("testing");

    return (
        <p>Hello World</p>
    )

}

export default TestComponent

如果我注释掉

useState

行，则会显示 Hello World，如果我取消注释该行，则会出现错误。

任何有关可能出现问题的想法将不胜感激。

提前谢谢您！

Answer 1

我认为你使用旧版本的react，我的系统上没有问题。 检查你的反应版本。

我在代码 SandBox 中遇到同样的问题，因为像这样的错误导入 - import { useState } from "react/cjs/react.Production.min";

`从 'react' 导入 React, { useState };

const TestComponent = () => {

const [testState, setTestState] = useState("testing");

return (
    <>
    <h2>{testState}</h2>
    <p>Hello World</p>
    </>
)

}

导出默认的TestComponent`

在此输入图片描述