React 如何将列表项添加到开头？使用push/unshift时list.map报错

报错原因 #

使用push()/unshift()时触发list.map is not a function的核心原因有两点：

• 这两个方法是原地修改原数组的方法，本身不符合React状态不可变更新的要求，直接操作会污染原状态值
• 这两个方法的返回值不是操作后的新数组，而是数组被修改后的长度（数字类型）。如果将这个返回值直接传入setList更新状态，存储的状态值会从数组类型变为数字类型，数字没有map方法，必然触发类型报错。

顶部插入新姓名的实现方案 #

要把新姓名添加到列表最前端，必须通过生成全新数组的方式完成状态更新，不能直接修改原状态数组，两种可直接使用的实现写法：

• 用扩展运算符直接构造新数组，将新项放在数组首位

  function handleAdd() {
    // 为新条目生成唯一id，避免列表渲染时key重复/缺失的警告
    const newItem = {
      id: Date.now().toString(),
      name: name
    }
    // 新数组结构：新条目在最前，原有列表元素依次排在后续位置
    const newList = [newItem, ...list]
    setList(newList)
    setName("")
  }
  

• 先拷贝原数组生成独立副本，再对副本执行插入操作

  function handleAdd() {
    const newItem = {
      id: Date.now().toString(),
      name: name
    }
    // 基于原列表拷贝生成全新数组，不直接修改原状态
    const newList = [...list]
    // 对拷贝出的新数组执行unshift，将新项插入到数组最前端
    newList.unshift(newItem)
    setList(newList)
    setName("")
  }
  

补充说明：原代码中使用list.concat({name})的写法是将新项追加到列表末尾的实现，该方法本身会返回新数组，不会触发类型报错，但插入位置不符合需求；同时新拼接的对象缺少id字段，会导致列表渲染的key值为undefined，建议补充唯一id字段。

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