React中如何更新state内的嵌套对象？商品数量递增方法报错

原有代码问题 #

你写的处理函数有三个核心错误：

• state.product定义的是数组类型，{...this.state.product, prod}是把数组当普通对象展开，最终生成的结构是{0: 商品1, 1:商品2, prod: 传入的商品对象}的普通对象，和state要求的数组结构不匹配，执行后会直接报错
• 逻辑没有定位到要修改的目标商品，只是把传入的prod当新属性塞到了对象里，根本没有对对应商品的incart字段做+1操作
• 直接拷贝state的写法没有遵循React不可变数据要求，容易出现状态不更新、引用污染的问题

可直接运行的正确写法 #

用函数式setState保证拿到的是最新state，通过数组map方法遍历匹配目标商品做更新，全程不修改原state数据：

handelIncrement = (prod) => {
  this.setState(prevState => ({
    product: prevState.product.map(item => {
      if(item.id === prod.id) {
        // 匹配到目标商品，返回新对象，incart+1
        return {...item, incart: item.incart + 1}
      }
      // 非目标商品直接返回原项，不做修改
      return item
    })
  }))
}

避坑提醒：不要直接在遍历的时候写item.incart++修改原对象，这种直接修改state引用的写法会导致React无法检测到状态变化，出现视图不更新的问题。

问题上下文 #

初始state定义：

state={
    product:[
        {id:1, title: 'demo product 1 ', price: 10, incart: 2},
        {id:2, title: 'demo product 2', price: 11, incart: 3},
    ],
}

原报错的处理函数：

// the onClick handler 
// prod arguments return a product object like this {id:1, title: 'demo product 1 ', price: 10, incart: 2}
handelIncrement= (prod) => {
    
    const newState = {...this.state.product, prod}  
    this.setState({ product: newState })  // giving an error
    
  }

内容的提问来源于stack exchange，提问作者Abu Hayat