无法更新反应组件的状态

Posted 2023-02-23

【中文标题】无法更新反应组件的状态

【英文标题】：Unable to update the state of a react component

【发布时间】：2020-11-26 07:40:04

【问题描述】：

我是一名新手全栈开发人员，从事基本的购物车前端任务。

当我单击 addtoCart 时，作为状态一部分的我的 cartItems 数组没有更新。正在调用 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>

我在 App 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】：

问题

item.count++; 是一个状态突变 您不能在状态更新后立即通过控制台记录状态并期望它从下一个渲染周期记录状态。

解决方案

首先搜索数组以检测购物车是否已包含商品。 使用功能状态更新。 浅复制数组和您更新的单个元素 在生命周期函数中记录状态，即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);