React点击列表删除按钮时提示name.map is not a function是什么原因？

错误原因 #

1. 核心报错原因是更新状态时修改了数据类型：你初始化的name是数组类型，但handleDelete中调用setName时使用了setName({newName})的写法，相当于把name的值替换成了一个包含newName属性的对象，对象没有map方法，所以渲染时执行name.map就会抛出name.map IS NOT A FUNCTION的错误。
2. 你提到的DevTools中可以正常删除、页面操作不行的差异原因是：React DevTools中手动修改状态是直接改值，不会触发你写的handleDelete逻辑，状态始终保持数组类型，所以不会报错；而页面点击删除按钮会执行你写的错误更新逻辑，把数组改成对象，自然就无法正常运行。
3. 代码还有两处可优化的逻辑问题：删除按钮点击事件传参是整个元素对象，和handleDelete预期接收的id不匹配；列表渲染没有加唯一key属性，会触发React的警告。

修复后完整代码 #

import React, {useState} from 'react'

function Deletecomponent() {
    const [name, setName] = useState([
        {
          text:'i am new here',
          author:'Hashim',
          id:1
        },
        {
          text:'i am new but not here',
          author:'Hashim',
          id:2
        },
        {
          text:'i am not new here',
          author:'Hashim',
          id:3
        },
      ]);
      
      const handleDelete = (id) => {
        const newName = name.filter(item => item.id !== id)
        // 直接传入过滤后的数组，不要包裹花括号
        setName(newName)
      }

    return (
        <div className='content'>
        {/* 遍历参数改名避免和状态名重名，添加唯一key属性 */}
        {name.map(item => (
            <div key={item.id}>
                <h2>{item.text}</h2>
                <p>{item.author}</p>
                {/* 传入当前元素的id值 */}
                <button onClick={() => handleDelete(item.id)}>Delete</button>
            </div>
        ))}
        </div>
    )
}

export default Deletecomponent

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