Невозможно обновить состояние компонента реакции - PullRequest
Новая
       103

Невозможно обновить состояние компонента реакции

0 голосов
/ 06 августа 2020

Я начинающий разработчик полного стека, работающий над основной задачей c корзины покупок.

Мой массив cartItems, который является частью состояния, не обновляется, когда я нажимаю на addtoCart. Вызывается функция addtoCart, но обновления не происходит. Ошибки не отображаются.

МОЙ компонент корзины покупок: 

export default class Cart extends Component {
    render() {
        const {cartItems} = this.props
        return (
            <div>
                {cartItems.length === 0 ? ( 
                    <div className='cart cart-header'>Cart is empty</div>
                    ) : (
                    <div className='cart cart-header'>You have {cartItems.length} items in yout cart{" "}</div>
                    )
                }
</div>

Мой код для добавления товара в корзину в приложении js: 

addToCart = (product) => {
    const cartItems = this.state.cartItems.slice();
    console.log(cartItems); 
    let alreadyInCart = false;
    cartItems.forEach((item) => {
      if(item._id === product._id) { 
      item.count++;
      alreadyInCart=true;
    }
    if(!alreadyInCart) {
      cartItems.push({...product, count:1});
    }
  })
    this.setState({cartItems});
    console.log(this.state.cartItems)
  };

1 Ответ

1 голос
/ 06 августа 2020

Проблемы

  • item.count++; - это мутация состояния
  • Вы не можете сохранить состояние журнала сразу после обновления состояния и ожидать, что он будет записывать состояние из следующий цикл рендеринга.

Решение

  • Сначала выполните поиск в массиве, чтобы определить, содержит ли уже товар в тележке.
  • Использовать рабочее состояние update.
  • Неглубокая копия массива и отдельных элементов, которые вы обновляете
  • Состояние журнала в функции жизненного цикла, т.е. componentDidUpdate после состояние обновлено. В крайнем случае вы можете использовать второй аргумент setState, функции обратного вызова, но это не рекомендуется.

Код 

addToCart = product => {
  const foundIndex = this.state.cartItems.findIndex(
    item => item._id === product._id
  );

  if (foundIndex !== -1) {
    this.setState(cartItems =>
      cartItems.map((item, i) =>
        i === foundIndex
          ? { ...item, count: item.count + 1 } // copy item and update count property
          : item
      )
    );
  } else {
    this.setState(cartItems => [...cartItems, { ...product, count: 1 }]);
  }
};

componentDidUpdate() {
  console.log(this.state.cartItems);
}
...