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

Question

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

我将此功能组件用作src到index.html的脚本标签。 当我在此功能组件的末尾添加一个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 ）

这是使用您提供的代码的工作示例的链接。 注意pakcage.json文件。 在React docs中更多细节