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使用的函数，因此{{1您定义的函数可能与内置的render()函数冲突。

还有here it is explained

通常，您可以通过三种方式在MobX中传递商店

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

2）进口商店   组件直接使用它们:)这是传递的MVP   存储周围，但独立测试组件变得棘手   很快你必须确保你的全球商店是正确的   首先是国家

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

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

Answer 2

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

在网络包'plugins'中将'babel-loader'添加到MapModel似乎有效。

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

2 个答案: