无法在 React 中使用“useState”功能组件

Question

我有一个带有 useState 钩子的 React 功能组件。

我将此函数组件用作index.html 内的脚本标记的src。 当我在这个功能组件的末尾添加一个render 方法时，它会抛出一个错误，指出无效的钩子。

我创建了一个index.html，并在其中将welcome.js 指定为脚本标签的源。当这个脚本执行时，它会调用函数welcome.js。 在Welcome 函数中，如果我使用状态挂钩，则会引发错误：

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

<script src="./Welcome.js"> </script>

welcome.js:

import React, {useState} from "react";
import {render} from "react-dom";

const Welcome = () => {
    const [name, setName] = useState("name");

    return(
        <div>     
            <label htmlFor="name">Name</label>       
            <input
             id="name"
             value={name}
             onChange= {e=>setName(e.target.value)}
             >
            </input>
        </div>
    )
}

render(<Welcome/>, document.getElementById("root"));

我想知道为什么我不能在这里使用welcome.js 中的状态挂钩。我们不能将状态钩子与render 方法一起使用吗？

Answer 1

组件内的代码是有效的。问题在于依赖问题或构建工具配置。确定

1. 你有更大的 react-dom 版本 16.8.0 (运行npm ls react-dom)
2. 您只导入了一个版本的 react。 （运行npm ls react）

这里是指向working example 的链接，其中包含您提供的代码。 注意 pakcage.json 文件。 更多详情react docs