React Router Dom切换URL后MobX Observer组件出现渲染覆盖警告的原因及解决方法

警告产生的原因 #

这个错误提示的核心是：MobX已经为你的TCEditContainer类组件的render方法添加了响应式包装，但之后这个render方法被其他代码覆盖了。结合你的场景，问题出在这两个点：

• 你在/club路由的children中直接嵌套渲染组件，这种写法会导致每次路由切换时，TCEditContainer都会被重新实例化。MobX的@observer装饰器会为类组件的render注入响应式监听，但组件重复实例化加上React内部的渲染逻辑，会导致原有的响应式render被覆盖，无法正常清理，进而触发内存泄漏警告，同时组件也失去了响应式更新的能力。
• 类组件的装饰器顺序有误，你的@observer不是最后一个执行的装饰器，导致它修改后的render方法被@autobind这类装饰器覆盖，破坏了MobX的响应式绑定。

修复方案 #

1. 调整React Router的路由写法 #

把路由内的直接嵌套组件拆成独立页面组件，通过Route的component属性挂载，让React Router正确管理组件的生命周期，避免不必要的重复实例化：

首先创建独立的ClubPage组件：

const ClubPage = () => (
  <Grid container xs={12} spacing={3}>
    <Grid item/>
    <Grid item xs={12}>
      <TCEditContainer/>
    </Grid>
    <Grid item xs={12}>
      <TCListContainer/>
    </Grid>
  </Grid>
);

然后修改App中的路由配置：

<Switch>
  <Route exact path="/" component={MainView}/>
  <Route path="/club" component={ClubPage}/>
  <Route path="/member" component={MemberPage}/>
  <Route component={() => <h2>Page Not Found</h2>}/>
</Switch>

（MemberPage也用同样的方式拆分即可）

2. 修正装饰器的执行顺序 #

装饰器的执行顺序是从下到上的，确保@observer是最靠近类定义的装饰器，这样它修改的render方法才不会被其他装饰器覆盖：

@inject("TCStore") 
@autobind
@observer // 这个必须放在最后
class TCEditContainer extends Component<any, any> {
  // ... 你的组件逻辑
}

3. （推荐）将类组件转为函数组件 #

MobX对函数组件的支持更稳定，完全不会出现类组件中render方法被覆盖的问题，代码也更简洁：

import { observer } from "mobx-react-lite";
import { inject } from "mobx-react";

const TCEditContainer = observer(({ TCStore }) => {
  // 在这里编写你的组件逻辑，和原类组件功能一致
  return <TCEditView /* 传递对应props */ />;
});

export default inject("TCStore")(TCEditContainer);

4. 手动清理响应式依赖（可选） #

如果你的组件中使用了自定义的reaction或autorun，记得在组件卸载时手动清理，避免内存泄漏：

componentWillUnmount() {
  // 假设你在组件中创建了reaction并保存了销毁函数
  if (this.reactionDisposer) {
    this.reactionDisposer();
  }
}

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