Question

我创建了一个stateObject并在输入表单中的数据发生更改时更新状态。我想在用户键入输入表单时清除“错误”键中的值。

我尝试在第一步中使用setState将错误密钥设置为null，但是它不起作用。但是当我在第二步中尝试相同时，错误密钥正确更新为空字符串。我无法弄清楚为什么第二步而不是第一步有效。有人可以解释一下吗？

const [userdata,setuserData] = useState({name:"",email:"",password:"",error:""});

const {name, email, password , error } = userdata;

//runs when the onchange click event works

const handleChange = (name)=> (event) =>{
    setuserData({...userdata,error:""}) // First Step- This line is not working
    setuserData({...userdata,[name]:event.target.value,error:""}); //Second Step - This is working
}

return (
<div className="container">
    <h2 className="mt-5 mb-5">Signup</h2>
    
    {/* inline Conditional Rendering*/}
    <div className="alert alert-primary" 
         style={{display:error ? "" : "none"}}>
        {error}
    </div>

    <form>
        <div className="form-group">
                <label className="text-muted">Name</label>
                <input 
                onChange={handleChange("name")}
                value={name}
                type="text" className="form-control"/>
        </div>
        <div className="form-group">
                <label className="text-muted">Email</label>
                <input 
                onChange={handleChange("email")}
                value={email}
                type="email" className="form-control"/>
        </div>
        <div className="form-group">
                <label className="text-muted">Password</label>
                <input 
                onChange={handleChange("password")}
                value={password}
                type="password" className="form-control"/>
        </div>
        <button className="btn btn-raised btn-primary"
        onClick={handleSubmit}>
            Submit
        </button>
    </form>
</div>  )

Answer 1

状态设置是异步的并且是批量的。调用Body时，先前的userdata不会立即更新。结果，只有setuserData的 final 调用会在下一次渲染时产生新状态。

您需要在一个调用中一次设置两个属性（要么设置一次，要么使用回调形式）：

setuserData

使用上述类似内容，一次，或使用：

setuserData({
  ...userdata,
  error: '', // or null?
  [name]: :event.target.value,
});

（但是第二个版本不必要重复；第一个选项在可能的情况下更可取）

react中的useState不更新状态对象

1 个答案: