React中的设置状态

Question

这里是沙箱代码https://codesandbox.io/s/setting-react-state-mxzkf?file=/src/App.js

我们有React状态:

const [valid, setValid] = useState({
nameOK: true,
nameValidated: false,
nameError: false,
emailOk: true,
emailValidated: false,
emailError: false
});

输入字段和验证函数:

function validateName(value) {
setValid({ ...valid, nameOK: false, nameValidated: true }); //WHY THIS DOES NOT RUN???
if (value.length > 4) {
setValid({...valid, nameOK: true, nameError: false});

} else {
setValid({ ...valid, nameError: true });
}
}

我希望nameValidated: true在每次验证时都被设置为无条件的，但它不会发生…

为什么?

Answer 1

正如Pascal提到的，您正在使用当前状态，因此重写了您的第一个更改。React不会合并功能组件状态下的属性。方法是基于前一个状态计算新状态

setValid(valid =>{return { ...valid, property: newValue }});