Question

我是新来的人。

在尝试构建功能组件时，我面临以下问题：未捕获的不变违规：无效的挂钩调用。挂钩只能在功能组件的主体内部调用。

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

const functionVersion = ()=>{
    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(functionVersion(), document.getElementById("root"))

我可以知道我的钩子语法有什么问题吗？

Answer 1

const FunctionVersion = ()=>{
    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(<FunctionVersion/>, document.getElementById("root"))

Answer 2

您只能在组件内部使用挂钩。

功能组件也是一个函数，因此仍然可以将then作为普通函数调用，但是如果您这样做，它就不会成为React组件。

要呈现功能组件，您需要使用JSX，它将转换为React.createElement(...)。

更改：

render(functionVersion(), document.getElementById("root"))

收件人：

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

您还需要使用第一个字母大写来命名功能组件的名称。

未捕获的不变违规：无效的挂钩调用

2 个答案: