React Hooks：map函数内setState异步问题与表单校验需求

你分析得非常准确——问题确实出在setState的异步特性和循环内多次调用setError的操作上。每次在map里调用setError({...errors, [key]: true})时，errors引用的都是组件当前的初始状态（因为setState的更新是异步批量处理的），所以前几次的修改都会被最后一次覆盖，最终只有最后一个空值对应的错误状态被设置为true。

正确的解决方案：先构建完整错误对象，再一次性更新 #

核心思路是：先遍历所有表单字段，在内存中构建好完整的错误状态对象，然后只调用一次setError来更新状态，避免异步更新带来的覆盖问题。

方法1：使用forEach构建错误对象

const submitForm = () => {
  // 初始化新的错误对象，先复制原错误状态（可选，根据需求决定是否保留历史错误）
  const newErrors = {...errors};
  
  Object.keys(values).forEach(key => {
    // 若字段值为空，标记为错误；否则可以选择清除错误（根据你的业务需求调整）
    newErrors[key] = values[key] === '';
  });
  
  // 一次性更新错误状态
  setError(newErrors);
}

方法2：使用reduce更简洁地构建错误对象

如果你喜欢更函数式的写法，可以用reduce来生成错误对象：

const submitForm = () => {
  const newErrors = Object.keys(values).reduce((acc, key) => {
    acc[key] = values[key] === '';
    return acc;
  }, {...errors}); // 传入原错误对象作为初始值，保留历史错误
  
  setError(newErrors);
}

关键说明 #

• 如果你希望只在点击提交时检查空值，并且清除之前的错误状态，可以把初始值换成空对象{}而不是{...errors}，这样每次提交都会重新计算所有字段的错误状态。
• 如果需要保留其他非空字段的历史错误状态（比如格式错误），就用{...errors}复制原错误对象，再覆盖空值对应的字段。

这样修改后，所有空值对应的表单字段错误状态都会被正确设置为true，不会出现只有最后一个生效的问题了。

内容的提问来源于stack exchange，提问作者J.Naude