javascript - useState() Hook 不会更新更改时的值

Question

上下文很少，我正在尝试创建一个用于获取用户注册的表单。

我首先编写了如下代码。

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;

我注意到在此代码片段中，setFormData 中的状态未更新，控制台日志记录名称或任何其他值返回空字符串。

result for the above code

但是在调整代码之后

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;

使代码正常工作并且结果符合预期。正如这张图片所示。 2nd way

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

Answer 1

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

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

然后

const onChange = e => {
    // The event will get passed as an argument even if you don't bind it in onChange={onChange}.
    console.log(e.target.name, e.target.value)
    setFormData({ ...formData, error: false, [e.target.name]: e.target.value })
}

事件将作为参数传递。

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