useState() 鈎子不會在更改時更新值

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 中的狀態沒有得到更新，控制台日志名稱或任何其他值返回一個空字符串。

上面代碼的結果

但是在這樣調整代碼之后

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;

使代碼工作，結果如預期。 就像這張圖片一樣。 第二種方式

為什么會有這樣的行為。 為什么第一種方法不起作用。

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 })
}

該事件將作為參數傳遞。

它適用於您將名稱作為參數傳遞的第二個原因

Answer 2

見文檔， https://reactjs.org/docs/thinking-in-react.html

React 的單向數據流（也稱為單向綁定）使一切保持模塊化和快速。

---

重要的事情來解決你的問題。

1. 功能組件 (FC) 狀態已更改，UI 已重新呈現。
2. 但是，您的signupForm渲染函數是在 FC 中聲明的。
3. 所以，當 SignupComponent 狀態改變時，它被重新聲明為一個新的。

第一的。 將signupForm渲染功能更改為 FC 組件。

其次，將 props 傳遞給組件。 第三，重復使用它們。

 import React from 'react'; // React is required to render JSX const FormInput = ({ type, placeholder, value, onChange, }) => ( <div className="form-group"> <input type={type} className="form-control" placeholder={placeholder} value={value} onChange={onChange} /> </div> ); const SignupComponent = () => { const [formData, setFormData] = React.useState({ name: '', email: '', password: '', error: false, 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, }); }; return ( <form onSubmit={handleSubmit}> <FormInput type="text" value={name} placeholder="Enter Your Name" onChange={handleChange('name')} /> <div> <button type="submit" className="btn btn-primary">Signup</button> </div> </form> ); }; export default SignupComponent;

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>