Mobx-react Observer与React Router视图不同步问题求助

嘿，我之前也碰到过这个坑！当你在组件的render方法里嵌入组件时，Mobx的observer失效通常和React Router的组件渲染逻辑以及Mobx的依赖追踪机制有关，下面帮你一步步排查解决：

常见原因及解决方案 #

1. 避免在的component/render里创建匿名组件 #

这是最常见的问题！如果你在里用箭头函数直接返回组件（比如component={() => <MyComponent />}），每次父组件render时都会创建一个全新的组件实例，Mobx为旧实例建立的依赖订阅会直接失效，自然无法同步视图。

错误写法：

<Route exact path={`${this.state.path}/doctor-details`} 
  component={() => <DoctorDetails doctor={HospitalStore.selectedDoctor} />} 
/>

正确写法：
直接传入已经用observer包裹好的组件引用，如果需要传额外props，用render属性并确保子组件本身是observer：

// 先确保DoctorDetails是observer组件
const DoctorDetails = observer(({ doctor }) => {
  return <div>{doctor.name}</div>;
});

// 路由里这样写
<Route exact path={`${this.state.path}/doctor-details`} 
  render={(routerProps) => <DoctorDetails {...routerProps} doctor={HospitalStore.selectedDoctor} />} 
/>

2. 确保路由渲染的组件本身被observer正确包裹 #

很多时候我们会忽略这一点：如果路由指向的组件没有用observer装饰，那它自然不会响应Mobx store的变化。不管组件是直接在路由里引用还是通过其他方式渲染，都要记得给它加上observer：

import { observer } from 'mobx-react';

// 类组件用装饰器
@observer
class DoctorList extends React.Component {
  render() {
    return <div>{HospitalStore.doctors.map(d => d.name)}</div>;
  }
}

// 函数组件用高阶组件
const DoctorDetails = observer((props) => {
  return <div>{props.doctor.name}</div>;
});

3. 检查Mobx Store的依赖追踪是否正确 #

确保你在组件的render方法里直接访问store的属性，而不是把store的值存在组件自身的state里（除非你有特殊的更新逻辑）。Mobx只能追踪在render期间被访问的store属性，如果你在componentDidMount里把store值存在state，之后store更新时组件不会自动同步：

错误写法：

class MyComponent extends React.Component {
  state = {
    doctors: []
  };

  componentDidMount() {
    // 把store的值存在state，之后store更新不会触发组件更新
    this.setState({ doctors: HospitalStore.doctors });
  }

  render() {
    return <div>{this.state.doctors.map(d => d.name)}</div>;
  }
}

正确写法：

@observer
class MyComponent extends React.Component {
  render() {
    // 直接访问store的属性，Mobx会自动追踪依赖
    return <div>{HospitalStore.doctors.map(d => d.name)}</div>;
  }
}

4. 尝试把路由逻辑抽成独立的observer组件 #

如果你的嵌套路由逻辑比较复杂，可以把整个路由部分抽成一个单独的组件，然后给这个组件加上observer，这样Mobx的依赖追踪会更清晰，也能避免父组件的渲染逻辑干扰路由组件：

const DoctorRoutes = observer(() => {
  const basePath = someStore.currentPath; // 这里访问store的值会被Mobx追踪
  return (
    <Switch>
      <Route exact path={`${basePath}/list`} component={DoctorList} />
      <Route exact path={`${basePath}/details`} component={DoctorDetails} />
    </Switch>
  );
});

// 然后在父组件里引用
class ParentComponent extends React.Component {
  render() {
    return (
      <InAppLayout ...>
        <SplitView ...>
          <DoctorRoutes />
        </SplitView>
      </InAppLayout>
    );
  }
}

按照上面的方法排查，应该就能解决observer无法同步视图的问题啦！

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