React类组件通过外部函数传值修改state失败如何解决？

问题根因 #

• 你手动通过new Myclass()创建的组件实例，和React运行时自动创建、挂载到页面的组件实例是完全独立的两个对象，你调用手动生成的实例的setMethod修改的是这个孤立实例的state，完全不会作用到实际运行的目标组件上。
• 未经过React内部调度挂载的组件实例，调用setState本身就不符合React的运行规则，即使你读取手动创建实例的state，也可能因为未正常触发更新流程出现值不符合预期的问题。

解决方案 #

不是只能通过props传值实现该需求，根据场景可以选择以下方案：

1. 父子组件通信优先用props #

如果调用该外部函数的模块和Myclass组件是父子关系，直接通过props传递状态更新函数或状态值即可，这是最符合React单向数据流设计的实现方式。

2. 全局状态管理 #

如果两个模块没有直接的组件层级关系，可以引入Redux、Zustand、Mobx等全局状态管理库，把需要共享的myval状态提到全局存储中，Myclass组件订阅对应状态，外部模块修改全局状态即可同步触发组件更新。

3. 事件总线（发布订阅模式） #

轻量场景可以自行实现事件总线完成跨模块通信，示例代码如下：

// 全局事件总线实现
const eventBus = {
  eventMap: {},
  on: (eventName, handler) => {
    if (!eventBus.eventMap[eventName]) eventBus.eventMap[eventName] = []
    eventBus.eventMap[eventName].push(handler)
  },
  emit: (eventName, payload) => {
    eventBus.eventMap[eventName]?.forEach(handler => handler(payload))
  },
  off: (eventName, handler) => {
    if (!eventBus.eventMap[eventName]) return
    eventBus.eventMap[eventName] = eventBus.eventMap[eventName].filter(item => item !== handler)
  }
}

// Myclass组件内订阅事件
componentDidMount() {
  this.updateHandler = (val) => this.setState({myval: val})
  eventBus.on('updateMyval', this.updateHandler)
}

// 组件卸载时取消订阅避免内存泄漏
componentWillUnmount() {
  eventBus.off('updateMyval', this.updateHandler)
}

// 外部函数直接触发事件即可更新组件状态
const myFunction=(val)=>{
  eventBus.emit('updateMyval', val)
}

4. Ref转发 #

如果是父组件需要调用子组件的方法更新状态，可以通过createRef拿到React生成的子组件真实实例，再调用实例的setMethod，此时修改的就是实际运行的组件的state，更新会生效。

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