Warm tip: This article is reproduced from serverfault.com, please click

javascript-ReactJS从状态(对象数组)中删除项目

(javascript - ReactJS remove item from state (array of objects))

发布于 2020-11-28 01:21:27

我在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"}]

现在我的问题是,如果用户单击“删除”按钮,并且将删除参数传递给我的删除函数name参数,那么如何删除收到名称的一项?这是我正在尝试做的事情,但实际上没有解决:

  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}])
    })
  } 

就像我说的那样,我一定做错了,因为这对我没有帮助。从状态删除一项的最佳方法是什么?(如果有更好/更智能的解决方案,请不要尝试修复我的代码)

谢谢!

Questioner
simonugor
Viewed
1
Matthew Brooks 2020-11-28 09:36:16

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


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

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