React中使用filter更新深层嵌套对象数组时状态结构异常问题

你当前的问题是过滤操作直接返回了data数组的结果，导致状态结构丢失了外层的数组和data包裹对象。只需重新构建与原结构一致的对象即可解决：

修改后的过滤代码 #

setEmployee(employee => [
  {
    ...employee[0], // 保留原对象的其他属性（如果有）
    data: employee[0].data.filter(ele => ele.status === 'passed')
  }
]);

代码说明 #

• 原代码直接返回了filter后的data数组，破坏了[{data: [...]}]的外层结构；
• 现在我们重新创建一个外层数组，内部包含一个对象：
  • 用扩展运算符...employee[0]保留原对象的所有现有属性（避免丢失可能存在的其他字段）；
  • 替换data属性为过滤后的数组，这样就完全保持了原有状态的结构。

扩展：如果外层数组有多个元素 #

如果你的employee状态可能包含多个{data: [...]}结构的对象，可以用map遍历处理：

setEmployee(employee => 
  employee.map(item => ({
    ...item,
    data: item.data.filter(ele => ele.status === 'passed')
  }))
);

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