@Nivaech

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

Есть state, и этот 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, но не оба одновременно, потому как предыдущее значение заменяется новым. Клацнул на размер - показывает только размер, на цвет - отображается только выбранный цвет. Почему не отображается и первое, и второе одновременно, ведь функции изменяют, по сути, разные значения и никак между собой не взаимодействуют?
  • Вопрос задан
  • 171 просмотр
Решения вопроса 2
0xD34F
@0xD34F Куратор тега JavaScript
setState выполняет лишь поверхностное слияние, если вам требуется обновлять вложенные объекты - следует копировать все их свойства:

this.setState({
  productToCart: {
    ...this.state.productToCart,
    color,
  },
});
Ответ написан
@lnked
pickSize = size =>
  this.setState(prevState => ({
    productToCart: {
      ...prevState.productToCart,
      size,
    }
  }))

pickColor = color =>
  this.setState(prevState => ({
    productToCart: {
      ...prevState.productToCart,
      color,
    }
  }))
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы