React中如何在onClick触发时实现两个组件同步更新setState

你遇到的无限循环、数据不同步问题核心原因有4点：

• 直接在render函数的同步执行流里调用setState会触发组件重渲染，重渲染又会再次执行render里的setState，直接形成死循环
• Products和Cart是两个独立组件，Products里更新购物车、写localStorage的操作，Cart组件默认感知不到变化，不会主动触发重渲染
• addToCart方法直接用push修改原state数组，违反React state不可变原则，容易出现状态更新不触发渲染的问题
• Cart里删除按钮的onClick直接写了localStorage.removeItem("item")，这行代码会在组件渲染时立刻执行，不是点击才触发，属于语法错误

第一步：修复Products组件的加购逻辑 #

不要直接修改原state数组，始终返回新的数组引用，保证React能检测到状态变化：

addToCart = (item) => {
  // 生成新数组，不直接修改原state引用
  const newCart = [...this.state.shoppingCart, item]
  this.setState({shoppingCart: newCart})
  localStorage.setItem('cart', JSON.stringify(newCart))
}

第二步：修复Cart组件的更新逻辑 #

商品总数、金额、税费、总金额都属于派生数据，根本不需要单独存入state，每次渲染时根据原始购物车数据直接计算即可，完全不用额外调用setState更新，从根源避免无限循环。
另外需要增加localStorage变化监听，保证加购后Cart能拿到最新数据：

class Cart extends Component{
  constructor(props){
    super(props)
    this.state = {
      // 只存原始购物车数据即可，派生的汇总值不需要存state
      cartItems: JSON.parse(localStorage.getItem('cart')) || []
    }
  }

  // 组件挂载时监听storage变化，其他组件修改localStorage时自动同步
  componentDidMount() {
    window.addEventListener('storage', this.syncCartFromStorage)
  }

  componentWillUnmount() {
    window.removeEventListener('storage', this.syncCartFromStorage)
  }

  syncCartFromStorage = () => {
    this.setState({
      cartItems: JSON.parse(localStorage.getItem('cart')) || []
    })
  }

  // 删除商品逻辑：点击时才执行
  handleRemoveItem = (itemId) => {
    const newCart = this.state.cartItems.filter(item => item.id !== itemId)
    this.setState({cartItems: newCart})
    localStorage.setItem('cart', JSON.stringify(newCart))
  }

  render(){
    // 所有汇总值直接在render阶段计算，不需要额外setState同步
    const { cartItems } = this.state
    const totalItems = cartItems.length;
    const amount = cartItems.reduce((acc, item) => acc + item.price, 0);
    const taxes = amount * 0.065;
    const totalAmount = amount + taxes;

    return(<>
      <div>
        <h2>YOUR CART</h2>
        <p>Total Items <span>{totalItems}</span></p>
        <p>Amount <span>{amount.toFixed(2)}</span></p>
        <p>Total Taxes <span>{taxes.toFixed(2)}</span></p>
        <p>Total Amount <span>{totalAmount.toFixed(2)}</span></p>
        <p>Check Out</p>
      </div>
      <div className="container prod-cntr">
        <div className="row prod-row">
          {cartItems.map((element) => (
            <div className="col-lg-3 prod-col" key={element.id}>
              <div className="card card-container">
                <img src={element.image} alt="product img" className="prod-img"/>
                <div className="card-body">
                  <p className="card-title">{element.product}</p>
                  <p className="card-text">{element.description}</p>
                  <div className="quantity-container">
                    <img src={minus} className="minus"/> 
                    <p className="quantity">QUANTITY:<span className="qnty-txt"></span></p> 
                    <img src={plus} className="plus"/> 
                  </div>
                  <button onClick={() => this.handleRemoveItem(element.id)}>Remove From Cart</button> 
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </>)
  }
}

推荐优化方案 #

如果Products和Cart在同一个页面下，最好把shoppingCart状态提升到两个组件的共同父组件维护：

• 父组件统一存储购物车state，给Products传addToCart回调props
• 父组件把购物车数据直接作为props传给Cart组件
• 不需要依赖localStorage做组件间通信，数据变化时props自动更新，两个组件同步重渲染，不会出现状态不同步问题
• localStorage仅用于页面初始化时读取数据、购物车变化时同步写入做持久化即可

React组件的更新流程是：state/props变化 → 调用render生成新虚拟DOM → 对比更新真实DOM。永远不要在render的同步执行流里直接调用setState，否则必然触发无限重循环。
所有可以从现有state/props计算得到的派生值，都不需要单独存到state里，直接在render阶段计算使用即可，既能减少冗余的state同步代码，也能从根源避免状态不一致、无限循环的问题

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