Reactjs 我是一个新的反应，并试图使一个表单使用useState。我得到一个错误：“TypeError:setValues不是handleInputChange函数”

您必须在useState中使用方括号

import React, {useState} from "react"
import {Grid, TextField} from "@material-ui/core"

const initialFieldValues = {
    sName: ''
}

const StudentForm = (props) => {
    const {values, setValues} = useState(initialFieldValues)

    const handleInputChange = e => {
        const {name,value} = e.target
        setValues({
            ...values,
            [name]: value

        })
    }

    return (
        <form autoComplete = "off" noValidate>
            <Grid container>
                <Grid item={6}>
                    <TextField
                        name = "sName"
                        variant = "outlined"
                        label = "Full Name"
                        value = {values.sName}
                        onChange = {handleInputChange}
                    />
                </Grid>

            </Grid>
        </form>
    )
}

export default StudentForm

---

你用错括号了。改为方括号：

const [values, setValues] = useState(initialFieldValues);

React api useState hook将返回一个数组，您可以按如下方式对其值和setValue函数进行分解：

const [values, setValues] = useState(initialFieldValues)

---

它应该是const[values，setValues]=useStateInitialFieldValuesypo，应该使用方括号，即数组分解：const[values，setValues]=useStateinitialFieldValues

import React, {useState} from "react"
import {Grid, TextField} from "@material-ui/core"

const initialFieldValues = {
    sName: ''
}

const StudentForm = (props) => {
    const [values, setValues] = useState(initialFieldValues) // change {} to []

    const handleInputChange = e => {
        const {name,value} = e.target
        setValues({
            ...values,
            [name]: value

        })
    }

    return (
        <form autoComplete = "off" noValidate>
            <Grid container>
                <Grid item={6}>
                    <TextField
                        name = "sName"
                        variant = "outlined"
                        label = "Full Name"
                        value = {values.sName}
                        onChange = {handleInputChange}
                    />
                </Grid>

            </Grid>
        </form>
    )
}

export default StudentForm