Question

努力查看这两个摘要之间的区别：

未设置状态

handleAddItemToCart = (item) => {
    this.setState((state) => {
      const { cartItems } = state;
      item.quantity = 1;
      cartItems.push(item);
      return { cartItems };
    });
  }

已设置状态

<...>
return { cartItems: [...cartItems] }

这对我来说实际上并不是一个问题，但我真的很想了解这里发生的事情–我误会了什么？

Answer 1

因为通过推送到数组，所以您可以同时更改先前状态和当前状态。尽管React不在乎，shouldComponentUpdate却可以，因为您无法确定当前状态是否不同于先前的状态，因为您同时改变了这两个状态。

shouldComponentUpdate(nextProps, nextState) {
  // does return false, although you mutated the state
  return nextState.items !== this.state.items;
}

也就是说，防弹，完全不变的方式是：

this.setState({ cardItems }) => ({ cartItems: [...cardItems, { ...item, quantity: 1 }] }));

React / React Native：不能使用以前状态的键来设置状态吗？

1 个答案: