如何避免state突变？批量更新日期时的状态异常求助

问题出在你直接修改了state.items[id]内部的属性，虽然最后展开了state.items，但内部的对象引用还是没变，所以导致了意外的变更。正确的做法是为每个要修改的对象创建新的副本，而不是直接修改原对象。

修改后的代码如下：

const allIds = getSubTasksId(Object.values(state.items), payload.id);
// 遍历allIds，逐个创建新的对象副本
const updatedItems = allIds.reduce((acc, id) => {
  const item = state.items[id];
  return {
    ...acc,
    [id]: {
      ...item,
      date: {
        ...item.date,
        current: payload.date
      }
    }
  };
}, { ...state.items });

return {
  ...state,
  items: updatedItems
};

• 用reduce替代forEach，避免直接修改原state对象
• 对每个要修改的item，先展开原item，再展开date对象，最后替换current属性
• 初始值用{ ...state.items }确保原items对象不被修改

这样做能保证所有层级的对象都是新的引用，彻底避免可变状态带来的问题。

内容的提问来源于stack exchange，提问作者vinograd