Question

我有一个功能，可以在袋子上添加物品。它的工作非常酷，但是我收到警告，请不要直接改变状态。使用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();
}

我希望避免出现此警告并正确更改状态。

Answer 1

您可以通过以下方式使用setState来更新bagList而不进行突变。

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

希望这会有所帮助！

Answer 2

我尝试了其他方法，但是我解决了警告，只是将状态添加到const中并归因于{...item}。这是代码：

...

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

Answer 3

问题出在您的代码顺序中。您直接在此处修改状态：

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

这就是为什么它引发错误。
您应该先创建newbagList，然后创建后对其进行修改，然后创建this.setState({ bagList: newbagList });

防止不要直接改变状态。使用setState（）

3 个答案: