考虑是不是你使用的mobx版本错了,最新版的mobx在语法方面做了
些修改。详细可参考Mobx github
例如我在敲mobx教程 03案例时,即便代码没什么问题点击按钮
时死活不再次加载,最后发现是新版mobx捣的鬼,我默认npm install
mobx安装的是最新版6.xx,对于@observer已经做了更改,导致
数据更新后无法自动渲染页面,直观感受就是既不报错按钮也不起作用
这个老师在这里this指向好像也有些问题我一并改了,下面是我更改后
的代码,mobx mobx-react版本分别是5.15.7 和 5.4.4
更改后代码如下
import React from 'react';
import ReactDOM, { render } from 'react-dom';
import './index.css';
// import App from './App';
import reportWebVitals from './reportWebVitals';
import {observable,action} from 'mobx'
import { observer } from 'mobx-react'
//初始化mobx容器仓库
class Store {
@observable count=0;
@action.bound increment(){
this.count++
}
}
@observer
class App extends React.Component{
render(){
const {store}=this.props
return (
<div>
<h1>App Component1</h1>
<p>{store.count}</p>
<p>
<button onClick={() => { store.increment() }}>点击增加</button>
</p>
</div>
)
}
}
ReactDOM.render(
<React.StrictMode>
<App store={new Store()}/>
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();