时间戳

首页 > 解决方案 > 反应钩子值未在异步函数中更新

reactjs - 反应钩子值未在异步函数中更新

问题描述

我正在尝试使用以下代码验证我的使用钩子的字段：

const validate = async () => {        
        if (!new ValidateFields().checkIfValidSnn(snn.value))
            setSnn({ ...snn, error: "Invalid snn" })
        if (!new ValidateFields().checkIfValidPhone(phone.value))
            setPhone({ ...phone, error: "Invalid phone number" })
        if (!new ValidateFields().checkIfValidEmail(email.value))
            setEmail({ ...email, error: "Invalid Email" })
        if (country.value.length <= 0)
            setCountry({ ...country, error: "Please select a country" })
  
    return [snn, phone, email, country].every(x => x.error == "" && x.value != "")
}

const submit = () => {
    validate()
        .then(success => {
            if (success)
                console.log("SUCCESS!")
            else
                console.log("Failed")
        })
}

但问题是，在 validate ruturns 一个值时，所有更改都没有改变。如何在不再次运行该功能的情况下获得正确的值？

标签： reactjsreact-hooks

解决方案

setState调用异步，因此您无法确定当前值。您可以将验证状态存储在局部变量中。async如果一个函数不使用，你也不需要标记它await。

const validate = () => {
    let isValid = true;

    if (!new ValidateFields().checkIfValidSnn(snn.value)) {
        setSnn({ ...snn, error: 'Invalid snn' });
        isValid = false;
    }
    if (!new ValidateFields().checkIfValidPhone(phone.value)) {
        setPhone({ ...phone, error: 'Invalid phone number' });
        isValid = false;
    }
    if (!new ValidateFields().checkIfValidEmail(email.value)) {
        setEmail({ ...email, error: 'Invalid Email' });
        isValid = false;
    }
    if (country.value.length <= 0) {
        setCountry({ ...country, error: 'Please select a country' });
        isValid = false;
    }

    return isValid;
};

const submit = () => {
    if (validate()) {
        console.log("SUCCESS!")
    } else {
        console.log("Failed")
    }
}

推荐阅读