React中如何正确更新useState定义的对象内多个指定字段

问题原因 #

你现在的写法之所以只生效最后一个字段更新，是因为React的state更新是异步批量处理的，你在循环里多次调用setProblems时，每次展开的problems都是当前这次回调触发时的旧值，后面的更新操作会直接覆盖前面的修改，最终只剩下最后一次更新的结果。

解决方案 #

你可以选择下面任意一种写法实现批量更新：

• 方法一：使用state更新的函数式写法，每次取最新的state值修改

  .catch((error) => {
    Object.keys(error.response.data).forEach((err) => {
      setProblems(prev => ({ ...prev, [err]: true }));
    });
  });
  

• 方法二（更推荐，仅触发一次state更新，性能更好）：先组装好完整的新对象，再一次性更新state

  .catch((error) => {
    const updatedProblems = { ...problems };
    Object.keys(error.response.data).forEach(err => {
      updatedProblems[err] = true;
    });
    setProblems(updatedProblems);
  });
  

• 方法三（更简洁的写法）：先批量生成要更新的错误字段，再合并到原对象

  .catch((error) => {
    const errorUpdates = Object.fromEntries(
      Object.keys(error.response.data).map(err => [err, true])
    );
    setProblems({ ...problems, ...errorUpdates });
  });
  

内容的提问来源于stack exchange，提问作者some nooby questions