React点击按钮删除多层嵌套数组对象元素时返回undefined如何解决

错误原因 #

• 你的第一层flatMap回调函数没有返回值，默认返回undefined，最终计算得到的items是无有效值的数组
• 原有逻辑使用flatMap会把所有子数组的元素拍平为一维结构，完全破坏了filters原有的嵌套格式，即使修复返回值问题，更新后的状态也无法匹配原有渲染逻辑

修复后代码 #

const handleDeleteFilter = (itemId: string) => {
  const newFilters = filters.map(param => {
    // 遍历处理当前对象下的所有子数组
    return Object.fromEntries(
      Object.entries(param).map(([key, subArr]) => [
        key,
        subArr.filter(item => item.id !== itemId)
      ])
    )
  })
  setFilters(newFilters)
}

逻辑说明 #

• 全程保留原始数据的嵌套结构，不需要修改你原有的渲染适配逻辑
• 所有操作基于不可变原则生成新对象/数组，符合React状态更新的规范，不会出现响应异常问题

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