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

Question

我刚开始尝试使用商店进行mobx-react，并且想要使用商店加上一个可观察的商品，但是甚至无法使用它。

使用@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

通常，有三种方法可以在MobX中传递存储

1）明确地通过道具。易于测试和明确遵循，但当你有深层嵌套的结构或许多商店时可能会变得笨拙（你可以通过商店商店来解决后者）

2）直接在组件中导入商店并使用它们:)这是传递商店的MVP，但是单独测试组件会很快变得棘手，因为您必须首先确保您的全球商店处于正确的状态

3）通过React的上下文机制传递商店。 Redux的Provider使用它，mobx-connect包也是如此。上下文是隐式传递的，深层组件可以从上下文中提取数据，但它仍然很容易测试，因为您只需要确保在测试组件之前设置一些上下文。

在你的情况下，你正在使用第3点。所以我创建了一个jsfiddle here,，商店作为道具传递到第1点。

Answer 2

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

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