React：useState 未按预期更新对象状态键

Question

我有一个包含许多输入元素的表单和一个位于下一页的按钮。在继续之前，它会验证所有输入，如果有任何输入为空，则相应的标签应为红色。为此，我在 css 中创建了一个类 text-red，如果有任何值为空，则将其设置为该类。 我决定将每个键的值存储在对象本身中。

我有一个这样的对象（无法发布实际代码）

const [data,setData] = useState({
            key1:{value:'',valueTextClass:'', formula:'', formulaInputClass:''},
            key2:{value:'',valueTextClass:'', formula:'', formulaInputClass:''},
            key3:{value:'',valueTextClass:'', formula:'', formulaInputClass:''}
           })

当我单击按钮时，它会调用验证函数并一一验证每个字段。 这是我写的代码块。

const validate = (key) => {
    Object.keys(data).forEach(key => {
            if(data[key].value == '')
                 setData(prev => (...prev, [key]:({...data[key], valueTextClass:'text-red' })));
            if(data[key].formula == '')
                 setData(prev => (...prev, [key]:({...data[key], formulaInputClass:'text-red' })))
            })
}

当两个值都为空时，只有公式标签设置为红色，值标签保持不变。 我尝试了很多办法，但最终一无所获。

Answer 1

问题与多次调用

setData

有关。设置状态操作是异步的，因此您必须调用一次才能解决问题。

const validate = (key) => {
  let newData = { ...data };
  Object.keys(data).forEach((key) => {
    newData = {
      ...newData,
      [key]: {
        ...newData[key],
        valueTextClass: newData?.[key]?.value === '' ? 'text-red' : '',
        formulaInputClass: newData?.[key].formula == '' ? 'text-red' : '',
      },
    };
  });
  setData(newData);
};

通过这种方式，您可以构建一个对象，然后只需 1 次调用即可正确更新状态。