为什么 name.map 不是函数？ [关闭]答案

【问题标题】：Why is name.map is not a function? [closed]为什么 name.map 不是函数？ [关闭]
【发布时间】：2021-11-11 23:45:22
【问题描述】：

我尝试映射一个数组并将其作为 Dom 元素输出，它运行良好，但我想向它添加一个删除功能，以便我可以删除具有相应 id 的任何元素，但由于某种原因，当我点击删除按钮它显示 name.map IS NOT A FUNCTION 我试图解决这个问题，但它不起作用，所以从 Chrome 网上商店安装 REACT 扩展，当我在组件中打开开发人员工具时，我看到删除按钮分配到每个元素，我可以从那里删除它，但在实际的 UI 中我不能为什么？

这里是开发工具的代码和截图

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(name => name.id !== id )
        setName({newName});
  
        console.log(id);
      }

    return (
        <div className='content'>
            
        {name.map(name => (
            <div>
           <h2>{name.text}</h2>
            <p>{name.author}</p>
            <button onClick={()=> handleDelete(name)}>Delete</button>
            </div>
            ))};

        </div>
    )
}

export default Deletecomponent

【问题讨论】：

setName({newName}); 所以name 现在是一个对象，而不是一个数组。你不能在非数组对象上调用.map。
那么解决办法是什么，我该如何更新 setName
通过传递 newName 而不是对象。
不要忘记someone answers时该做什么。干杯。

标签： arrays reactjs react-hooks

【解决方案1】：

您正在将状态不变量从数组更改为对象。对象不可迭代并且没有固有的map 函数。由于name 现在是一个对象，map 属性是未定义的，不是一个函数，因此会出现错误。

const handleDelete = (id) => {
  const newName = name.filter(name => name.id !== id )
  setName({newName}); // <-- now an object!
}

你应该将它维护为一个数组，将过滤后的数组作为下一个状态值返回。

const handleDelete = (id) => {
  setName(name => name.filter(el => el.id !== id));
}

您还需要在每个映射元素上设置一个 React 键并将id 属性也传递给删除处理程序，以便过滤可以正常工作。密钥对于 React 的协调是必需的，因此它可以识别 UI 中发生了哪些变化，哪些没有发生变化，以及在重新渲染时可能会保留哪些内容。

{name.map(name => (
  <div key={name.id}> // <-- React key
    <h2>{name.text}</h2>
    <p>{name.author}</p>
    <button onClick={()=> handleDelete(name.id)}> // <-- pass id
      Delete
    </button>
  </div>
))}

【讨论】：

现在错误消失了，但是当我点击什么都没发生时它不会删除，我在下面添加了一个 console.log，当我点击时我可以看到被点击的元素
@HashimAliyuHashim 您缺少每个映射元素上的 React 键，因此 React 知道在重新渲染时数组中删除或更改了哪些内容。

【解决方案2】：

你有一个冲突的变量名。在您的情况下， name 是一个数组，但被一个对象覆盖。只需为变量“名称”使用不同的名称。

建议：数组使用“names”，单个对象使用“name”。

【讨论】：