如何过滤含子数组属性的对象数组？React状态更新报错排查

你的代码报错原因很明确：你把过滤后的items数组直接赋值给了newChecklist，然后用setChecklist更新状态，这会把原本对象类型的checklist替换成数组，状态类型不匹配导致报错。

要实现「保留原对象所有其他属性，仅移除items中符合条件的元素」，正确的做法是创建一个新对象，复制原checklist的所有属性，再替换items为过滤后的数组：

if (project?.analysisData?.actionPlan === "no") {
  const newChecklist = {
    // 复制原checklist的所有属性
    ...checklist,
    // 替换items为过滤后的数组，兜底空数组避免undefined报错
    items: checklist?.items.filter(item => item.conformityStatus !== "initial_status") || []
  };
  setChecklist(newChecklist);
}

关键说明 #

• 使用扩展运算符...checklist可以完整保留原对象的其他属性（比如除items之外的任何字段）
• checklist?.items是可选链语法，避免checklist为undefined时访问items报错
• 加上|| []是为了防止filter调用时，checklist?.items为undefined导致的错误，确保始终传入数组

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