无法让最基本的 mobx 商店与观察者一起工作

Question

我刚开始尝试使用 store 进行 mobx-react，并想使用一个 store 加上一个 observable，但我什至无法让它工作。

使用 @observer，我得到错误 Uncaught TypeError: Cannot assign to read only property 'render' of object '#<ProxyComponent>'。

没有它，值变为 1。

我不确定这里出了什么问题，有什么想法吗？

import {observable} from 'mobx'
import {inject, observer} from 'mobx-react'

class AppStore {
  @observable value = 1;
}

@inject('store') @observer
class App extends React.Component {
  render(){
    const {store} = this.props
    return (
      <div>
        {store.value}
      </div>
    )
  }
}

const render = (Component) => {
  const appStore = new AppStore()
  ReactDOM.render(
    <AppContainer>
      <Provider store={appStore}>
        <Component/>
      </Provider>
    </AppContainer>,
    document.getElementById('root'),
  )
}

render(App)

Answer 1

你的代码有点不清楚，比如你从哪里导入 Provider 和 ReactDOM。而且因为 render 是 ReactDOM 使用的函数所以 render() 您定义的函数可能与内置的 render() 函数冲突。

还有here it is explained

In general there are three ways in which you can pass stores in MobX

1) Explicitly via props. Easy to test and clear to follow, but can become clumpsy when you have deeply nested structures or many stores (you can solve the latter by having a store for stores)

2) Import stores in the components directly and just use them :) It's the MVP of passing stores around, but stand alone testing of components becomes tricky quickly as you have to make sure your global stores are in the right state first

3) Pass stores around via React's context mechanism. Redux's Provider uses that, as does the mobx-connect package. Context is passed implicitly and deep component can extract data out of the context, but it is still easy to test as you only have to make sure you set up some context before testing the component.

在您的情况下，您使用的是第 3 个 point.So 我创建了一个 jsfiddle here, 商店作为第 1 点中的道具传递。

Answer 2

原来这是一个配置（webpack 热加载器）问题，而不是代码本身的问题（在 jsfiddle 下运行）。

在 webpack 的 'babel-loader' 中将 'react-hot-loader/babel' 添加到 'plugins' 似乎有效。

无法让最基本的 mobx 商店与观察者一起工作

Can't get the most basic mobx store to work with observer

javascript

reactjs

mobx

mobx-react