如何在 React 中將新值推送到 object 數組中

Question

我認為問這個問題可能很愚蠢，但相信我是 React 新手。 我正在嘗試將新鍵和值推送到 object 數組，但我無法做到。 有人可以幫助我如何實現我的目標。 謝謝

代碼

this.state= {
cartItems=[
{name:'item1',price:'$23'},
{name:'item2',price:'$26'},
{name:'item3',price:'$24'},
]

我想在 object 的數組末尾添加新的值，例如quantity:0 。 請幫我

Answer 1

如果你想更新 state 為每個 object 添加一個屬性，你應該將setState與map結合使用。 Array.prototype.map允許您轉換每個 object，如下所示：

this.setState(state => {
  cartItems: state.cartItems.map(cartItem => ({ 
    ...cartItem, // Keep all old properties
    quantity: 0 // Add quantity
  })
})

只有在初始化器之后調用setState時，才應該這樣做。 如果您需要在分配給this.state時修改數據，直接使用 map 數組即可。

Answer 2

也許試試這個

const newState = this.state.cartItems.map(item => {
  item.quantity = 0;

  return item;
});

this.setState({cartItems: newState});

Answer 3

this.state= {
  cartItems:[
    {name:'item1',price:'$23'},
    {name:'item2',price:'$26'},
    {name:'item3',price:'$24'},
  ]
}
updateCartItems=()=>{ 
   var cartItems = this.state.cartItems.map((item)=>{
      return {...item,quantity:0}
   })
   this.setState({cartItems})
}