使用React Hooks删除嵌套数组元素时触发map报错问题求助

问题根因 #

你遇到的map报错基本是修改state时违反了React的不可变原则，或是破坏了原有state的结构导致items字段变为undefined，调用map方法时就会抛出异常。

正确实现方案 #

假设你通过useState存储了初始的MYDATA结构，删除指定itemid元素的逻辑如下：

1. 基于之前的state做更新，避免依赖外部state值出现不同步问题
2. 浅拷贝外层对象，仅修改需要更新的items字段
3. 使用filter方法生成新的items数组，排除需要删除的元素

代码示例 #

import { useState } from 'react'

const MYDATA = {
  id: '0001',
  title: 'A good title',
  items: [
    {
      itemid: 0,
      title: 'Cheddar',
      variants: [
        { id: '062518', grams: 200, price: 3.00},
        { id: '071928', grams: 400, price: 5.50},
      ]
    },
    {
      itemid: 1,
      title: 'Edam',
      variants: [
        { id: '183038', grams: 220, price: 2.50},
        { id: '194846', grams: 460, price: 4.99},
      ]
    },
    {
      itemid: 2,
      title: 'Red Leicester',
      variants: [
        { id: '293834', grams: 420, price: 4.25},
        { id: '293837', grams: 660, price: 5.99},
      ]
    }
  ]
}

export default function App() {
  const [data, setData] = useState(MYDATA)

  // 入参为要删除的元素对应的itemid
  const deleteItem = (targetItemId) => {
    setData(prevState => {
      return {
        // 保留原有外层字段：id、title
        ...prevState,
        // 过滤生成新的items数组
        items: prevState.items.filter(item => item.itemid !== targetItemId)
      }
    })
  }

  // 渲染列表的逻辑
  return (
    <div>
      {data.items.map(item => (
        <div key={item.itemid}>
          <span>{item.title}</span>
          <button onClick={() => deleteItem(item.itemid)}>删除</button>
        </div>
      ))}
    </div>
  )
}

常见错误排查 #

• 不要直接使用splice、pop等可变方法修改state中的数组，这类方法会直接修改原数组，不会生成新的引用，React无法检测到state变化，同时会污染原state数据
• 更新state时不要丢失原有结构，不要直接把过滤后的items数组赋值给整个state，否则会导致外层的id、title字段丢失，data.items变为undefined，调用map时就会报错
• 渲染列表时记得给每一项添加唯一的key属性，避免渲染异常

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