问题描述

使用create-react-app创建react项目
使用mobx进行状态管理
已经安装装饰器的编译器

项目结构

------src
----components
--Democomponent.js
--test.js
----App.js

报错信息

Error: MobX injector: Store 'test' is not available! Make sure it is provided by some Provider

具体代码

App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import DemoComponent from "./components/DemoComponent"

function App () {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
      <DemoComponent></DemoComponent>
    </div>
  );
}

export default App;

Democomponent.js

import React from 'react'
import ReactDOM from 'react-dom'
import { observer, inject } from 'mobx-react';


/*
* inject 在模块内用 @inject('Store')，将 Store 注入到 props 上,保证结构的一致性
* 使用 @observer ，将组件变为观察者，响应 name 状态变化。
* 当状态变化时，组件也会做相应的更新。
*/
@inject('test')
// 观察者
@observer
class DemoComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  handleClick = () => {
    this.props.test.changeName('改变')
  }
  render () {
    const { test } = this.props;
    return (
      <div>
        <p>{test.name}</p>
        <button onClick={this.handleClick}>使用改名卡</button>
      </div>
    );
  }
}

export default DemoComponent;

test.js

import { observable } from 'mobx';

class TestStore {
  // 被观察者
  @observable name;
  // 定义action(动作)
  @action
  changeName = name => {
    this.name = name
  }
  constructor() {
    this.name = '浮云先生'
  }
}
const test = new TestStore()
export default test

问题解决过程

1. 通过搜索引擎搜素了完整报错信息，没有符合的结果。
2. 上stackoverflow搜索完整的报错信息，没有符合的结果。
3. 去除报错信息中特有的“test”部分再次进行搜索，得到符合的结果。

来自必应搜索

mobx react inject 理解

来自stackoverflow

React-Native + Mobx + React Navigation : Error: MobX injector: Store ‘…’ is not available! Make sure it is provided by some Provider

问题出现原因

没有通过mobx的组件Provider传入stores

Provider是一个React组件，使用React的上下文（context）机制，可以用来向下传递stores，即把state传递给其子组件

问题解决方案

修改App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import DemoComponent from "./components/DemoComponent"
import test from "./components/test"
import { observer, Provider } from 'mobx-react';

function App () {
  return (
    <Provider test={test}>
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
        </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
        </a>
        </header>
        <DemoComponent></DemoComponent>
      </div>
    </Provider>

  );
}

export default App;

收获

通过搜索引擎搜索问题应该去掉自己项目的专属名词