React / React Native：不能使用先前状态的键设置状态？答案

【问题标题】：React / React Native: can't setState using key from previous state?React / React Native：不能使用先前状态的键设置状态？
【发布时间】：2019-08-23 19:32:03
【问题描述】：

努力看看这两个sn-ps有什么区别：

状态未设置

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

设置状态

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

这对我来说实际上不是问题，因为我可以正常工作，但我真的很想了解这里发生了什么 - 我误解了什么？

【问题讨论】：

如果有人想编辑问题标题以使其更清晰一些，我将不胜感激
你正在改变数组。如果您真的想这样做，请使用 shouldComponentUpdate 比较新旧值

标签： javascript reactjs react-native ecmascript-6 setstate

【解决方案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 }] }));

【讨论】：

啊，好的，有道理，谢谢 - shouldComponentUpdate 是拼图中缺失的部分。可能相关：我在 React 文档中发现了这一点——“将来 React 可能会将 shouldComponentUpdate() 视为提示而不是严格的指令，返回 false 仍可能导致组件重新渲染。”