问题描述
使用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
问题解决过程
- 通过搜索引擎搜素了完整报错信息,没有符合的结果。
- 上stackoverflow搜索完整的报错信息,没有符合的结果。
- 去除报错信息中特有的“test”部分再次进行搜索,得到符合的结果。
来自必应搜索
来自stackoverflow
问题出现原因
没有通过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;
收获
通过搜索引擎搜索问题应该去掉自己项目的专属名词