使用useState挂钩更新状态时出现问题

时间:2020-05-09 05:35:18

标签: reactjs react-hooks use-state

我正在使用useSatate来管理表单错误:

const [formErrorObj, updateForErrormObj] = useState({
        name_error: '',
        email_error: '',
        contact_number_error: '',
        username_error: '',
        password_error: '',
        promo_mail_error: ''
    })

这是我创建所有形式错误的对象的地方:

function onSubmitHandler(event) {
        event.preventDefault();
        const error = validate();
        if (error) {
        const errorList = error.error.details;
        const newErrorObj = {};
        for (let err in errorList) {
            newErrorObj[error.error.details[err].context.key + '_error'] = error.error.details[err].message

        }
        updateForErrormObj({ ...formErrorObj, ...newErrorObj })

        console.log(newErrorObj, formErrorObj)
    }
}

新创建的对象看起来像这样:

contact_number_error: ""Contact Number" is not allowed to be empty"
email_error: ""Email" must be a valid email"
name_error: ""Username" is not allowed to be empty"
password_error: ""Password" length must be at least 5 characters long"
username_error: ""Username" is not allowed to be empty"
__proto__: Object

验证后,当我尝试使用:

更新状态时
updateForErrormObj({ newErrorObj }) // try 1 
updateForErrormObj(newErrorObj) // try 2
updateForErrormObj({ ...formErrorObj, ...newErrorObj }) // try 3

从我的三幅作品中都无法尝试。 我不确定我在做什么错。

1 个答案:

答案 0 :(得分:1)

如果您的意思是它不会更新,因为您对其进行了console.log。它是这样工作的,它是异步的。您可以通过useEffect中的console.log进行检查,从而可以看到它确实在更新。