基于ID移除数组对象：Filter代码失效，需保留剩余数据提交

问题原因 #

1. filter 是纯函数，不会修改原数组，你当前调用后没有保存返回的新数组，等于白执行
2. 更新状态时的写法错误，{ ...monitoringResult, monitoringResult } 并没有修改任何数据，只是把原对象复制了一遍，还多了一个冗余的monitoringResult属性

修复后的代码 #

const deleteChartData = (id) => {
  // 拿到过滤后的新数组，处理可选链的空值情况
  const filteredCharts = monitoringResult?.monitoringResults?.opCharts?.filter(col => col.id !== id) || [];
  
  // 逐层更新嵌套状态，保证不可变性
  setMonitoringResult({
    ...monitoringResult,
    monitoringResults: {
      ...monitoringResult.monitoringResults,
      opCharts: filteredCharts
    }
  });
  
  setTimeout(() => {
    formikForm.handleSubmit();
  }, 0);
};

关键说明 #

• 必须保存filter返回的新数组，因为原数组不会被修改
• 更新嵌套对象状态时，要逐层用扩展运算符...拷贝，保证状态的不可变性，这样React才能检测到状态变化并重新渲染
• 加上|| []处理空值情况，避免filter调用后返回undefined导致状态异常

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