React如何从独立组件触发Header组件刷新以更新购物车商品计数

问题原因说明 #

你定义在组件外部的reload函数没有绑定LogoHeader组件的实例，this指向不存在所以会报错，而且直接调用forceUpdate强制刷新的方式不符合React数据驱动渲染的设计思路，不推荐使用。

适配你现有代码的解决方案 #

你已经有独立的CartHandler.js管理购物车逻辑，我们可以在里面加入轻量的发布订阅逻辑实现跨组件通知，不需要引入额外的状态管理库：

步骤1：修改CartHandler.js，添加订阅通知逻辑

// 你原有存储购物车数据的变量
let cartItems = []
// 新增订阅回调队列
const listeners = []

// 你原有修改购物车的方法，比如加购、减购、清空，所有修改数据的操作后都加通知逻辑
export function addItem(item) {
  cartItems.push(item)
  // 改完数据后通知所有订阅者更新
  listeners.forEach(callback => callback())
}

// 你原有的获取购物车数量方法保留
export function GetCount() {
  return cartItems.length
}

// 新增订阅、取消订阅方法
export function subscribeCartChange(callback) {
  listeners.push(callback)
  // 返回取消订阅函数，组件卸载时调用避免内存泄漏
  return () => {
    const index = listeners.indexOf(callback)
    if (index > -1) listeners.splice(index, 1)
  }
}

步骤2：修改LogoHeader组件，订阅购物车变化

1. 构造函数的state中新增购物车计数字段，初始化直接读当前计数：

constructor({ history }) {
  super({ history });
  this.state = {
    name: 'React',
    apiData: [],
    canAdmin: false,
    history: history,
    cartCount: GetCount() // 新增字段
  };
}

2. componentDidMount中添加订阅逻辑：

componentDidMount() {
  // 你原有代码全部保留，新增下面这段
  this.unsubscribe = subscribeCartChange(() => {
    // 购物车变动时更新state，触发局部渲染
    this.setState({ cartCount: GetCount() })
  })
}

3. 新增组件卸载时的订阅清理逻辑：

componentWillUnmount() {
  this.unsubscribe?.()
}

4. render方法中读取state里的计数即可：

render() {
  const logoImage = this.state.image;
  const myHeader = this.state.header;
  const count = this.state.cartCount; // 替换原来的GetCount()调用
  // 其余render代码完全保留
}

修改完成后，你在任何组件调用购物车修改方法（加购、减购等）时，Header的购物车计数都会自动更新，只会刷新计数对应的span部分，不需要手动调用任何刷新方法。

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