React.JS中展开数组修改指定对象backlog的状态设置问题

你的需求完全可以实现，核心是要正确遍历数组定位目标对象，同时遵循React状态更新的不可变性原则。

问题分析 #

你之前的代码存在两个关键错误：

• prevProjects是数组，无法通过prevProjects[selected]直接访问目标对象（数组按索引而非对象键访问）；
• 你尝试在数组末尾追加新对象，而非修改数组中已存在的目标对象。

正确实现代码 #

setProjects((prevProjects) => 
  prevProjects.map(item => {
    // 检查当前数组元素是否包含目标键selected
    if (item.hasOwnProperty(selected)) {
      // 创建新对象，保留原结构并更新backlog
      return {
        [selected]: {
          ...item[selected],
          backlog: [...item[selected].backlog, NewObj]
        }
      };
    }
    // 非目标元素直接返回原对象，避免不必要的重新渲染
    return item;
  })
);

代码说明 #

1. 遍历数组：用map生成新数组，保证原数组不被直接修改；
2. 定位目标对象：通过hasOwnProperty检查当前元素是否包含selected对应的键；
3. 不可变更新：
   • 用[selected]动态设置新对象的键名，匹配原结构；
   • 展开原对象的backlog属性并追加新对象NewObj，生成新的数组；
4. 非目标元素：直接返回原对象，保持引用不变，提升性能。

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