为什么我的mobx写的没问题却报错？

最新推荐文章于 2024-10-02 11:56:31 发布

进击的切图仔

最新推荐文章于 2024-10-02 11:56:31 发布

阅读量939

点赞数

CC 4.0 BY-SA版权

分类专栏： webpack mobx

本文链接：https://blog.csdn.net/it___is_/article/details/116669212

webpack 同时被 2 个专栏收录

2 篇文章

订阅专栏

mobx

1 篇文章

订阅专栏

本文介绍如何解决使用mobx新版更新后导致的数据无法自动渲染问题，包括调整mobx版本及代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

考虑是不是你使用的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();