React 如何仅更新购物车中被点击元素的state，不影响其余元素？

你的代码核心问题是所有购物车商品共用了全局的count状态，没有和单个商品绑定，因此修改计数会同步影响所有商品的显示。要实现仅更新被点击商品的状态，你需要把计数和单个商品绑定，操作时只修改对应商品的数据即可，具体修改方案如下：

修改步骤 #

• 移除全局的count状态，将计数属性放到每个购物车商品条目上，给商品新增quantity字段存储自身购买数量
• 修改加购触发函数，接收商品ID作为入参，更新状态时只修改对应ID商品的quantity值，其余商品保持原样
• 渲染子组件时，将对应商品自身的quantity传入，同时绑定加购函数时传入当前商品的ID

修改后完整代码 #

class ShoppingCart extends Component {
  constructor() {
    super();
    this.state = {
      isEmpty: true,
      cartItems: [],
    };
    this.getStoredProducts = this.getStoredProducts.bind(this);
    this.handleButtonIncrease = this.handleButtonIncrease.bind(this);
  }

  componentDidMount() {
    this.getStoredProducts();
  }

  // 接收商品id作为参数
  handleButtonIncrease(targetId) {
    this.setState((prevState) => ({
      // 只修改对应id的商品数量，其余商品原样返回
      cartItems: prevState.cartItems.map(item => {
        if(item.id === targetId) {
          return {
            ...item,
            quantity: item.quantity ? item.quantity + 1 : 1
          }
        }
        return item
      })
    }));
  }

  getStoredProducts() {
    const getFromStorage = JSON.parse(localStorage.getItem('cartItem'));
    if (getFromStorage !== null) {
      // 初始化时给没有数量的商品补默认数量1
      const processedItems = getFromStorage.map(item => ({
        ...item,
        quantity: item.quantity || 1
      }))
      this.setState({
        cartItems: processedItems,
        isEmpty: processedItems.length === 0
      });
    }
  }

  render() {
    const { isEmpty, cartItems } = this.state;
    const emptyMsg = (
      <p data-testid="shopping-cart-empty-message">你的购物车是空的</p>
    );
    return (
      <div>
        { isEmpty ? (emptyMsg) : (cartItems.map((item) => (
          <ShoppingCartProduct
            key={ item.id }
            id={ item.id }
            // 传当前商品自身的数量，不是全局count
            count={ item.quantity }
            cartItems={ item }
            // 绑定函数时传入当前商品id
            handleButtonIncrease={ () => this.handleButtonIncrease(item.id) }
          />
        )))}
      </div>
    );
  }
}

该方案基于数组map返回新数组的特性实现，没有匹配到ID的商品会直接返回原对象，不会产生任何修改，完全不会影响其他元素的状态。

内容的提问来源于stack exchange，提问作者johnjoker13