Javascript 防止不直接突变状态。使用setState（）

我有一个功能，以添加项目的袋子。它的工作相当酷，但我得到一个警告，不要直接变异状态。使用setState（）

如何使用

this.setState（）

来代替

this.state.bagList[item.id]={…item}

addToBag = (item) => {
 let itemFound = false;

 Object.keys(this.state.bagList).map((key) => {
  const bagItem = this.state.bagList[key];

  if(bagItem.id === item.id) {
    itemFound = true;
    bagItem.quantity++;
    return bagItem;

  } else {
    return bagItem;        
    }
 });

  if(!itemFound) {
   this.state.bagList[item.id] = {...item};
  }

 const newbagList = this.state.bagList;
 this.setState({ bagList: newbagList });
 localStorage.setItem("productsOnBag", JSON.stringify(newbagList));
 this.showBag();
}

我希望能够阻止此警告并正确地改变状态。
您可以按以下方式使用
setState
来更新
bagList
，而无需改变

this.setState((prevState) => ({
  bagList: {
    ...prevState.bagList,
    [item.id]: {...item}
  }
}))

希望这会有帮助
 问题在于代码的顺序。
您正在此处直接修改状态：

   if(!itemFound) {
   this.state.bagList[item.id] = {...item};
  }

这就是它抛出错误的原因。

您应该首先创建
newbagList
，然后在修改它和
this.setState（{bagList:newbagList}）之后创建
我尝试了其他一些方法，但我解决了警告问题，只需在
常量中添加我的状态，并将
{…item}
归为属性。代码如下：

...

if(!itemFound) {
 const addItemToBagList = this.state.bagList;
 addItemToBagList[item.id] = {...item };
}