MobX 报错，如何排查和解决常见的 MobX 错误？-HCRM博客

MobX报错问题解析与解决方法

MobX 是一个用于管理应用状态的库，它通过可观察的数据和计算来简化状态管理，在实际使用过程中，开发者可能会遇到各种错误，本文将详细分析 MobX 常见的报错问题及其解决方法，帮助开发者更好地理解和使用 MobX。

（图片来源网络，侵权删除）

一、MobX版本不兼容问题

1.原因分析：

在项目开发中，不同版本的 MobX 和 MobXReact 可能存在兼容性问题，某些功能或语法在新版本中被修改或删除，导致旧代码无法正常运行。

2.解决方法：

确保项目中使用的 MobX 和 MobXReact 版本兼容，如果遇到版本不兼容的问题，可以尝试升级或降级相关依赖包。

示例：

// package.json
{
  "dependencies": {
    "mobx": "^5.15.7",
    "mobxreact": "^6.3.0"
  }
}

如果上述方法仍然无法解决问题，可以考虑使用makeObservable 替代装饰器来定义可观察属性。

（图片来源网络，侵权删除）

示例：

import {observable, action, makeObservable} from "mobx";
class LearnStore {
  constructor() {
    makeObservable(this, {
      learnData: observable,
      increment: action
    });
  }
  
  learnData = getVal("learnData", []); // 学生详情是否打开
  setLearnData(val) {
    this.learnData = val;
    setVal("learnData", val);
  }
}
export default new LearnStore();

二、装饰器报错

1.原因分析：

在使用 MobX 的装饰器时，可能会遇到编译器无法识别装饰器的错误，这通常是因为项目中没有安装相应的 TypeScript 插件或者 Babel 插件。

2.解决方法：

确保项目中安装了必要的 TypeScript 插件或 Babel 插件，以便正确编译带有装饰器的代码。

TypeScript 配置示例：

（图片来源网络，侵权删除）

// tsconfig.json
{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

Babel 配置示例：

// .babelrc 或 babel.config.js
{
  "plugins": ["@babel/pluginproposaldecorators", "@babel/pluginproposalclassproperties"]
}

三、MobXReact缺少autorun函数

1.原因分析：

在使用autorun 函数时，如果直接从mobxreact 导入，可能会导致找不到该函数的错误，这是因为autorun 实际上定义在mobx 包中，而不是mobxreact。

2.解决方法：

应该从mobx 包中导入autorun 函数，而不是从mobxreact。

错误示例：

import {autorun} from 'mobxreact'; // 错误的方式

正确示例：

import {autorun} from 'mobx'; // 正确的方式

四、MobX Injector错误

1.原因分析：

在使用mobxreact 的inject 功能时，如果未通过Provider 提供所需的 store，会导致组件无法获取到注入的 store，从而抛出错误。

2.解决方法：

确保在使用inject 之前，已经通过Provider 提供了相应的 store，还需要确保在组件中使用@inject 注解正确地指定了 store 的名称。

错误示例：

@inject('test') // 错误的方式
@observer
class DemoComponent extends React.Component {
  ...
}

正确示例：

import { observer, inject, Provider } from 'mobxreact';
const test = new TestStore(); // 确保实例化 store
function App () {
  return (
    <Provider test={test}>
      <div className="App">
        <header className="Appheader">
          ...
          <DemoComponent></DemoComponent>
        </header>
      </div>
    </Provider>
  );
}

并在组件内部正确使用@inject：

@inject('test') // 正确的方式
@observer
class DemoComponent extends React.Component {
  handleClick = () => {
    this.props.test.changeName('改变');
  }
  render () {
    const { test } = this.props;
    return (
      <div>
        <p>{test.name}</p>
        <button onClick={this.handleClick}>使用改名卡</button>
      </div>
    );
  }
}