如何在JavaScript/React中过滤深层嵌套数组同时保留父对象结构

要保留完整的对象结构，仅过滤深层数组中isActive === false的元素，你需要逐层复制原对象的属性，只替换需要过滤的数组部分，而不是直接提取数组进行过滤。这样既保留了所有父节点数据，又得到了过滤后的数组。

方法一：逐层展开复制（高效推荐） #

利用对象展开运算符...复制原对象的所有属性，仅替换第三层的source数组：

// 复制第一层source的所有属性，再处理第二层
const responseDataFiltered = {
  ...source,
  source: {
    // 复制第二层source的所有属性
    ...source.source,
    // 将第三层source替换为过滤后的数组
    source: source.source.source.filter(obj => obj.isActive)
  }
};

// 之后传入useState
setData(responseDataFiltered);

这种方式只会复制必要的层级，避免不必要的深拷贝，对于包含数千个元素的数组来说性能更优，同时能确保生成新的对象，触发React的状态更新。

方法二：深拷贝后修改（适合复杂结构） #

如果原对象的嵌套结构更复杂，或者你需要完整复制整个对象再修改，可以使用structuredClone（现代浏览器及Node.js 17+支持）：

// 深拷贝整个原对象
const clonedSource = structuredClone(source);
// 直接修改拷贝后的对象中的数组
clonedSource.source.source = clonedSource.source.source.filter(obj => obj.isActive);

// 传入useState
setData(clonedSource);

注意事项 #

• 不要直接修改原source对象：React的状态更新依赖于新的引用，直接修改原对象无法触发组件重渲染，还可能导致不可预期的副作用。
• 过滤条件可以简化：obj.isActive === true等价于直接写obj.isActive（因为isActive是布尔值），这样代码更简洁。

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