Mobx observer包裹的React组件状态变更后未重新渲染问题求助

问题根因及解决方案 #

1. 响应式属性初始化时机错误（最高概率） #

你当前在构造函数中先调用makeAutoObservable(this)，之后才完成部分属性的赋值，Mobx的响应式追踪只会对调用makeAutoObservable时实例上已存在的已初始化属性生效，后续赋值的属性不会被自动标记为响应式，所以会出现状态实际更新、但observer组件收不到更新通知的问题。

修复方案：

直接在类属性声明时完成mouseCoordinates的初始化，且将makeAutoObservable放到构造函数所有属性初始化逻辑的最后：

export class WebsocketStore {
  websocketSubject = webSocket('ws://localhost:8080/socket');
  chartSubject;
  priceDataStore;
  tradePlanStore;
  // 直接在类声明阶段初始化默认值，保证属性提前存在
  mouseCoordinates = {
    x: 0,
    y: 0,
  };

  constructor() {
    this.priceDataStore = new PriceDataStore(this);
    this.tradePlanStore = new TradePlanStore(this);
    this.chartSubject = groupByFunction(
      'messageType',
      'getChart',
      this.websocketSubject
    );
    // 所有属性初始化完成后再调用makeAutoObservable
    makeAutoObservable(this);
  }

  // 其余代码保持不变
}

如果不想修改初始化逻辑，也可以调整updateCoordinates的实现，不替换整个mouseCoordinates对象，只修改对象内部的属性值：

updateCoordinates = (coordinates) => {
  this.mouseCoordinates.x = coordinates[0];
  this.mouseCoordinates.y = coordinates[1];
};

2. 排查store实例一致性 #

请确认ChartCrossHairs组件是WebSocketProvider的后代组件，保证useWebsocketStore拿到的store实例和你更新鼠标坐标时使用的是同一个实例，避免多实例导致状态不同步。 #

3. 低版本Mobx兼容 #

如果你使用的是Mobx 6以下的旧版本，makeAutoObservable的支持不完善，可以替换为手动声明响应式属性的方案：

import { makeObservable, observable, action } from 'mobx';

constructor() {
  this.mouseCoordinates = {x: 0, y: 0};
  makeObservable(this, {
    mouseCoordinates: observable,
    updateCoordinates: action
  });
  // 其余初始化逻辑
}

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