Javascript useState（）钩子在更改时不更新值

小上下文，我正在尝试创建一个表单来获得用户注册

我首先编写代码如下

import { useState } from 'react';


const SignupComponent = () => {
const [formData, setFormData] = useState({
    name: '',
    email: '',
    password: '',
    error: '',
    loading: false,
    message: '',
    showForm: true
})

const { name, email, password, error, loading, showForm } = formData;

const onChange = e => {
    setFormData({ ...formData, error: false, [e.target.name]: e.target.value })
    console.log(name)

}
const handleSubmit = async e => {
    e.preventDefault();
    console.table({ name, email, password, error, loading, showForm })
}


const signupForm = () => {
    return (
        <form onSubmit={handleSubmit}>
            <div className="form-group">
                <input type="text" className="form-control" placeholder="Enter Your Name" values={name} onChange={e => onChange(e)} />
            </div>

            <div className="form-group">
                <input values={email} onChange={e => onChange(e)} type="email" className="form-control" placeholder="Enter Your Email" />
            </div>

            <div className="form-group">
                <input values={password} onChange={e => onChange(e)} type="password" className="form-control" placeholder="Enter Your Password" />
            </div>

            <div>
                <button className="btn btn-primary">Signup</button>
            </div>
        </form>
    );

};
return <React.Fragment>{signupForm()}</React.Fragment>};
export default SignupComponent;

从'react'导入{useState}；
常量注册组件=（）=>{
常量[formData，setFormData]=useState({
名称：“”，
电子邮件：“”，
密码：“”，
错误：“”，
加载：false，
消息：“”，
展示形式：真实
})
const{name，email，password，error，loading，showForm}=formData；
const onChange=e=>{
setFormData（{…formData，错误：false，[e.target.name]：e.target.value}）
console.log（名称）
}
const handleSubmit=async e=>{
e、 预防默认值（）；
表（{名称、电子邮件、密码、错误、加载、showForm}）
}
const signupForm=（）=>{
返回(
onChange（e）}/>
onChange（e）}type=“email”className=“form control”placeholder=“输入您的电子邮件”/>
onChange（e）}type=“password”className=“form control”placeholder=“输入密码”/>
报名
);
};
返回{signupForm（）}}；
导出默认注册组件；

我注意到在这个代码片段中，setFormData中的状态没有得到更新，console logging name或任何其他值返回一个空字符串

但是在调整了代码之后

import { useState } from 'react';


const SignupComponent = () => {
const [formData, setFormData] = useState({
    name: '',
    email: '',
    password: '',
    error: '',
    loading: false,
    message: '',
    showForm: true
})

const { name, email, password, error, loading, showForm } = formData;

const handleChange = value => (e) => {
    setFormData({ ...formData, error: false, [value]: e.target.value })
    console.log(name)

}
const handleSubmit = async e => {
    e.preventDefault();
    console.table({ name, email, password, error, loading, showForm })
}


const signupForm = () => {
    return (
        <form onSubmit={handleSubmit}>
            <div className="form-group">
                <input type="text" className="form-control" placeholder="Enter Your Name" values={name} onChange={handleChange('name')} />
            </div>

            <div className="form-group">
                <input values={email} onChange={handleChange('email')} type="email" className="form-control" placeholder="Enter Your Email" />
            </div>

            <div className="form-group">
                <input values={password} onChange={handleChange('password')} type="password" className="form-control" placeholder="Enter Your Password" />
            </div>

            <div>
                <button className="btn btn-primary">Signup</button>
            </div>
        </form>
    );

};
return <React.Fragment>{signupForm()}</React.Fragment> };
export default SignupComponent;

从'react'导入{useState}；
常量注册组件=（）=>{
常量[formData，setFormData]=useState({
名称：“”，
电子邮件：“”，
密码：“”，
错误：“”，
加载：false，
消息：“”，
展示形式：真实
})
const{name，email，password，error，loading，showForm}=formData；
常量handleChange=value=>（e）=>{
setFormData（{…formData，错误：false，[value]：e.target.value}）
console.log（名称）
}
const handleSubmit=async e=>{
e、 预防默认值（）；
表（{名称、电子邮件、密码、错误、加载、showForm}）
}
const signupForm=（）=>{
返回(
报名
);
};
返回{signupForm（）}}；
导出默认注册组件；

使代码正常工作，结果符合要求。如图所示。

---

为什么会这样。为什么第一种方法不起作用。

您忘记了输入中的name属性，以及没有s的value属性

<input name="email" value={email} onChange={onChange} ... />

事件将作为参数传递

---

它适用于第二个原因，因为您将名称作为参数传递

您在输入中忘记了name属性，而value属性没有s

<input name="email" value={email} onChange={onChange} ... />

事件将作为参数传递

它适用于第二个原因，即您将名称作为参数传递

React的单向数据流（也称为单向绑定）使所有内容保持模块化和快速

---

解决你的问题很重要

功能组件（FC）状态更改，UI重新呈现

但是，您的

signupForm

render函数是在FC中声明的

因此，当SignupComponent状态更改时，它将作为一个新组件重新处理

首先。将

signupForm

render函数更改为FC组件

第二，将道具传递给组件。 第三，重复使用它们

从“React”导入React；//React是呈现JSX所必需的
常量FormInput=({
类型，
占位符，
价值
一旦改变，
}) => (
);
常量注册组件=（）=>{
常量[formData，setFormData]=React.useState({
名称：“”，
电子邮件：“”，
密码：“”，
错误：false，
加载：false，
消息：“”，
展示形式：对，
});
常数{
名称、电子邮件、密码、错误、加载、showForm、，
}=表格数据；
常量handleChange=（值）=>（e）=>{
setFormData({
…表格数据，
错误：false，
[价值]：即目标价值，
});
console.log（名称）；
};
const handleSubmit=async（e）=>{
e、 预防默认值（）；
控制台({
名称、电子邮件、密码、错误、加载、showForm、，
});
};
返回(
报名
);
};
导出默认注册组件

参见文档

React的单向数据流（也称为单向绑定）使所有内容保持模块化和快速


解决你的问题很重要

功能组件（FC）状态更改，UI重新呈现
但是，您的
signupForm
render函数是在FC中声明的
因此，当SignupComponent状态更改时，它将作为一个新组件重新处理
首先。将
signupForm
render函数更改为FC组件

第二，将道具传递给组件。
第三，重复使用它们


从“React”导入React；//React是呈现JSX所必需的
常量FormInput=({
类型，
占位符，
价值
一旦改变，
}) => (
);
常量注册组件=（）=>{
常量[formData，setFormData]=React.useState({
名称：“”，
电子邮件：“”，
密码：“”，
错误：false，
加载：false，
消息：“”，
展示形式：对，
});
常数{
名称、电子邮件、密码、错误、加载、showForm、，
}=表格数据；
常量handleChange=（值）=>（e）=>{
setFormData({
…表格数据，
错误：false，
[价值]：即目标价值，
});
console.log（名称）；
};
const handleSubmit=async（e）=>{
e、 预防默认值（）；
控制台({
名称、电子邮件、密码、错误、加载、showForm、，
});
};
返回(
报名
);
};
导出默认注册组件