javascript - setstate 不使用动态键名更新

Question

我不确定为什么我的状态不会使用 errorOption = key + 'Error' 更新，然后使用 [errorOption]: true 设置状态。因为我的 formErrors 状态使用与 formDetails 相同的初始键，但末尾带有“错误”，所以我只是将它连接起来。我也尝试过使用模板文字，但在这里连接看起来更容易阅读。

我希望它验证表单以检查是否为空并将错误状态更改为 true

const defaultData = {
    username: '',
    password: '',
}
const defaultErrorState = {
    usernameError: false,
    passwordError: false,
}

const [formDetails, setFormDetails] = useState(defaultData);
const [formErrors, setFormError] = useState(defaultErrorState);

const {
    username,
    password
} = formDetails

const {
    usernameError,
    passwordError
} = formErrors


const validateForm = (inputs) => {
    const checkThreshold = (currentValue) => currentValue.length > 0;
    let errorOption
    Object.entries(inputs).forEach(([key, value]) => {
        if (!checkThreshold(value)) {
            errorOption = key + 'Error'
            setFormError({
                ...formErrors,
                [errorOption]: true
            })
        }
    })
    Object.entries(inputs).every(checkThreshold)
}

const handleSubmit = (event) => {

    const basicInfoValues = {
        username: username,
        password: password,
    }
    if (validateForm(basicInfoValues)){
        // login stuff
    } else {alert("Fill in all fields")}

}

标签： javascriptreactjs