Почему не изменяется значение state-объекта?

Question

[nivaech]

Есть state:

state = {
    productToCart: {
      size: '',
      color: ''
    }
  }

Перед тем как отправить товар в корзину, пользователь должен выбрать размер и цвет, который идут в state.
Так выглядит код для выбора размера и цвета:

{itemSizes.map((size, index) => {
     return (
       <li key={index} className={"filter-item " + (this.state.productToCart.size === size ? "filter-active" : null)} onClick={() => 
       {this.pickSize(size)}}> {size} </li>
    )
   }
 )}
...
{itemColors.map((color, index) => {
     return (
       <li key={index} className={"filter-item " + (this.state.productToCart.color === color ? "filter-active" : null)} onClick={() => 
       {this.pickColor(color)}}> {color} </li>
    )
   }
 )}

Вот функции, которые задают значение состояния:

pickSize = (size) => {
    this.setState({
      productToCart: {
        size: size
      }
    })
   }
...
pickColor = (color) => {
    this.setState({
      productToCart: {
        color: color
      }
    })
   }

В результате обновляется состояние только или цвета, или размера. Если выводить результат в консоль - отображается только последний измененный state, но не оба одновременно, потому как предыдущее значение заменяется новым. Клацнул на размер - показывает только размер, на цвет - отображается только выбранный цвет. Почему не отображается и первое, и второе одновременно, ведь функции изменяют, по сути, разные значения и никак между собой не взаимодействуют?

Comments

[Lynn «Кофеман»]

Функции изменяют одно значение: productToCart

Answer 1

[0xD34F]

setState выполняет лишь поверхностное слияние, если вам требуется обновлять вложенные объекты - следует копировать все их свойства:

this.setState({
  productToCart: {
    ...this.state.productToCart,
    color,
  },
});

Comments

[lnked]

лучше немного модернизировать и использовать так:

this.setState(prevState => ({
  productToCart: {
    ...prevState.productToCart,
    color,
  },
}));

Answer 2

[lnked]

pickSize = size =>
  this.setState(prevState => ({
    productToCart: {
      ...prevState.productToCart,
      size,
    }
  }))

pickColor = color =>
  this.setState(prevState => ({
    productToCart: {
      ...prevState.productToCart,
      color,
    }
  }))