我是React的新手，我试图使用useState制作一个表单。我得到一个错误。"TypeError: setValues不是函数handleInputChange"

Posted 2021-04-29

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

答案

你必须在useState()中使用方括号。

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

另一答案

你使用了错误的括号。请改成方括号。

const [values, setValues] = useState(initialFieldValues)

另一答案

React api useState 钩子将返回一个 array 你可以拆解它的 value 和 setValue 这样的功能。

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