ReactJS 从状态中删除项目（对象数组）答案

【问题标题】：ReactJS remove item from state (array of objects)ReactJS 从状态中删除项目（对象数组）
【发布时间】：2021-03-10 17:17:06
【问题描述】：

我在 ReactJS 中做一个 E-shop 模板来练习，一切都完成了，但我不知道什么是从状态中删除一个带有对象的数组形式的项目的最佳方法。

这是我正在尝试做的一个示例：

定义我的状态：

const [cartData, setCartData] = useState([])

向其中添加项目：

const exampleFunction = (heading, price) => {
    setCartData([...cartData, {name: heading, price: price}])
}

所有这些都工作得很好，所以添加一些项目后我的状态如下所示：

[{name: "White T-shirt", price: "$20"}, {name: "Red T-shirt", price: "$20"}]

现在我的问题是，如果用户单击删除按钮并且我将名称参数传递给我的删除函数，我如何删除收到名称的一项？这是我试图做的，但它并没有真正奏效：

  const deleteItem = (name) => {
    var newList = []
    cartData.map(d => {
      if (d.name !== name) {
        newList.push(d.name)
      }
      return d
    })
    setCartData([])
    newList.map(item => {
      setCartData([...cartData, {name: item.name}])
    })
  }

就像我说的那样，我一定是做错了，因为这对我不起作用。从状态中删除一项的最佳方法是什么？（如果有更好/更智能的解决方案，请不要尝试修复我的代码）

谢谢！

【问题讨论】：

查看作为从数组中删除元素的选项stackoverflow.com/questions/47023975/…。
@simonugor 你可以使用 Javascript 的 slice 方法，它会返回一个新的数组对象

标签： javascript reactjs react-hooks

【解决方案1】：

你想要的是filter数组原型方法。


  const deleteItem = (name) => {
    setCartData((state) => state.filter((item) => item.name !== name))
  }

使用当前状态值更新状态时，最好将回调函数传递给setState。

【讨论】：

【解决方案2】：

这应该会从cardData 中删除具有指定名称的条目：

const deleteItem = (name) => {
  const newCartData = cartData.filter((d) => d.name !== name);
  setCartData(newCartData);
};

【讨论】：

【解决方案3】：

您需要使用filter() 数组方法。根据 MDN 网络文档，filter() 方法创建一个新数组，其中包含所有通过所提供函数实现的测试的元素。

const deleteItem = (name) => {
    const newList = cartData.filter(d => d.name !== name);
    setCartData(newList);
}

【讨论】：