React非Redux环境下组件间购物车数据通信问题求助

不用Redux完全没问题！React本身的状态提升就是解决这类跨组件数据共享问题的核心方案——把需要共享的购物车状态放到共同的父组件（也就是你的App组件）里，Counter只负责传递当前商品的选择信息，App来统一管理购物车数据并在头部展示。

下面是具体的修改步骤：

1. 重构App组件，接管购物车状态 #

首先，把原来Counter里的购物车相关状态（cart数组）移到App组件，同时实现处理添加商品的逻辑：

import React, { Component } from "react";
import Counter from "./Counter";
import ShoppingCart from "./ShoppingCart";

class App extends Component {
  state = {
    cart: []
  };

  // 处理添加商品到购物车的逻辑
  handleAddToCart = (productName, quantity) => {
    this.setState(prevState => {
      // 检查商品是否已在购物车中
      const existingItemIndex = prevState.cart.findIndex(item => item.name === productName);
      
      if (existingItemIndex !== -1) {
        // 已存在，更新数量
        const updatedCart = [...prevState.cart];
        updatedCart[existingItemIndex].productsNumber = quantity;
        return { cart: updatedCart };
      } else {
        // 不存在，添加新商品
        return {
          cart: [...prevState.cart, { name: productName, productsNumber: quantity, key: productName }]
        };
      }
    });
  };

  render() {
    return (
      <div className="app">
        {/* 头部展示购物车 */}
        <header className="app-header">
          <h2>购物车</h2>
          <ShoppingCart cart={this.state.cart} />
        </header>
        
        {/* 商品Counter组件，传递添加回调 */}
        <div className="products">
          <Counter name="商品A" availableProducts={20} onAddToCart={this.handleAddToCart} />
          <Counter name="商品B" availableProducts={15} onAddToCart={this.handleAddToCart} />
          {/* 更多商品... */}
        </div>
      </div>
    );
  }
}

export default App;

2. 修改Counter组件，移除本地购物车状态 #

Counter现在只需要维护当前商品的选择数量（shoppingCart），点击"Add to cart"时调用App传过来的回调函数，把商品名和数量传过去：

import React, { Component } from "react";
import "./Counter.css";

class Counter extends Component {
  state = { 
    shoppingCart: 0 
  };

  handleRemoveFromCart = () => {
    this.setState(prevState => ({ shoppingCart: prevState.shoppingCart - 1 }));
  };

  handleAddToCart = () => {
    this.setState(prevState => ({ shoppingCart: prevState.shoppingCart + 1 }));
  };

  // 点击添加时，调用父组件的回调
  handleAddProductsToCart = () => {
    const { name, onAddToCart } = this.props;
    onAddToCart(name, this.state.shoppingCart);
  };

  render() {
    const { availableProducts } = this.props;
    return (
      <div className="counter">
        <button 
          className="buttonCount" 
          disabled={this.state.shoppingCart === 0}
          onClick={this.handleRemoveFromCart}
        >-</button>
        <span> {this.state.shoppingCart} </span>
        <button 
          className="buttonCount" 
          disabled={this.state.shoppingCart === availableProducts}
          onClick={this.handleAddToCart}
        > + </button>
        <button 
          className="buy" 
          disabled={this.state.shoppingCart <= 0}
          onClick={this.handleAddProductsToCart}
        >Add to cart</button>
      </div>
    );
  }
}

export default Counter;

3. 调整ShoppingCart组件，接收整个购物车数组 #

让ShoppingCart负责渲染整个购物车列表，而不是单个商品：

import React, {Component} from "react"
import "./ShoppingCart.css";

class ShoppingCart extends Component {
  render() {
    const { cart } = this.props;
    if (cart.length === 0) {
      return <div className="cart-empty">购物车为空</div>;
    }
    return (
      <div className="shopping-cart">
        {cart.map(item => (
          <div key={item.key} className="cart-item">
            <span>{item.name}</span>
            <span>x {item.productsNumber}</span>
          </div>
        ))}
      </div>
    );
  }
}

export default ShoppingCart;

为什么这样做？ #

• 状态单一数据源：购物车数据只在App里维护，避免了多个组件各自维护状态导致的不一致问题。
• 组件职责清晰：Counter只负责处理当前商品的数量选择，ShoppingCart只负责渲染购物车内容，App负责全局状态管理和逻辑处理，符合React的组件设计原则。
• 无需额外依赖：完全用React原生特性解决问题，不用引入Redux或其他状态管理库。

这样修改后，你点击Counter的"Add to cart"按钮，购物车数据就会同步到App的状态里，App头部的ShoppingCart组件就能正确展示所有商品啦！

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