Question

我有一个带有useState挂钩的react功能组件。

我将此功能组件用作src到index.html中的脚本标签。当我在此功能组件的末尾添加render方法时，它将引发错误，指出无效的挂钩。

我创建了index.html，在其中我将welcome.js分配为脚本标签的源。因此，当该脚本退出时，它将调用函数welcome.js。在欢迎功能中，如果我使用状态挂钩，则会抛出错误

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

         <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

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

您的React-dom版本大于16.8.0（运行npm ls react-dom）
您仅导入了一个版本的react。（运行npm ls react）

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

中有更多详细信息

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

1 个答案: