React / React Native: нельзя установить setState, используя ключ из предыдущего состояния?

Question

Пытаясь понять, в чем разница между этими двумя фрагментами:

Состояние НЕ установлено

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

Состояние IS установлено

<...>
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 }] }));