Mobx Reactjs 对我不起作用(我无法注入我的商店)
Mobx Reactjs is not working for me(I can't inject my store)
我不确定我做错了什么,但我总是出错。我想一次会犯一个错误。我将我的项目精简到最简单的部分。希望有人能看到问题
app.bundle.js?31044e2…:12841 Uncaught TypeError: Cannot read property 'isMobxInjector' of undefined
at observer (app.bundle.js?31044e2…:12841)
at Object.<anonymous> (app.bundle.js?31044e2…:35924)
at __webpack_require__ (app.bundle.js?31044e2…:20)
at Object.<anonymous> (app.bundle.js?31044e2…:23127)
at __webpack_require__ (app.bundle.js?31044e2…:20)
at Object.<anonymous> (app.bundle.js?31044e2…:17566)
at __webpack_require__ (app.bundle.js?31044e2…:20)
at module.exports (app.bundle.js?31044e2…:63)
at app.bundle.js?31044e2…:66
app.js
import React from 'react';
import ReactDOM from 'react-dom';
import stores from './stores';
import UserPage from './components/UserPage'
import { Provider } from 'mobx-react';
ReactDOM.render(
<Provider userStore={stores.userStore}>
<UserPage />
</Provider>,
document.getElementById('root')
);
用户页面
import React, { Component } from 'react'
import ReactDOM from 'react-dom';
import { observer, inject } from 'mobx-react';
import DevTools from 'mobx-react-devtools';
import Asset from '../classes/user'
@inject('userStore')
@observer()
export default class UserPage extends Component {
constructor() {
super();
}
render() {
let userStore = this.props.userStore;
return (
<div>
test
</div>
)
}
}
用户商店
import {observable, computed, action} from 'mobx';
class UserStore {
@observable users = []
@observable activeUser = 2;
@computed get count() {
return this.users.length;
}
@action.bound setActiveUser(){
// I would like to pass in a paramter but not sure if it is possible with @action.bound
this.activeUser = 1;
}
}
var userStore = new UserStore();
export default userStore;
index.js
import userStore from './userStore';
const stores = {
userStore
}
export default stores;
用户
import {observable} from 'mobx';
class User {
@observable firstName
@observable lastName
constructor(firstName = '', asselastNametType = '') {
this.firstName = firstName;
this.lastName = asselastNametType;
}
}
export default User;
observer
不接受任何参数。改为:
@inject('userStore')
@observer
export default class UserPage extends Component {
render() {
let userStore = this.props.userStore;
return <div> test </div>
}
}
我不确定我做错了什么,但我总是出错。我想一次会犯一个错误。我将我的项目精简到最简单的部分。希望有人能看到问题
app.bundle.js?31044e2…:12841 Uncaught TypeError: Cannot read property 'isMobxInjector' of undefined
at observer (app.bundle.js?31044e2…:12841)
at Object.<anonymous> (app.bundle.js?31044e2…:35924)
at __webpack_require__ (app.bundle.js?31044e2…:20)
at Object.<anonymous> (app.bundle.js?31044e2…:23127)
at __webpack_require__ (app.bundle.js?31044e2…:20)
at Object.<anonymous> (app.bundle.js?31044e2…:17566)
at __webpack_require__ (app.bundle.js?31044e2…:20)
at module.exports (app.bundle.js?31044e2…:63)
at app.bundle.js?31044e2…:66
app.js
import React from 'react';
import ReactDOM from 'react-dom';
import stores from './stores';
import UserPage from './components/UserPage'
import { Provider } from 'mobx-react';
ReactDOM.render(
<Provider userStore={stores.userStore}>
<UserPage />
</Provider>,
document.getElementById('root')
);
用户页面
import React, { Component } from 'react'
import ReactDOM from 'react-dom';
import { observer, inject } from 'mobx-react';
import DevTools from 'mobx-react-devtools';
import Asset from '../classes/user'
@inject('userStore')
@observer()
export default class UserPage extends Component {
constructor() {
super();
}
render() {
let userStore = this.props.userStore;
return (
<div>
test
</div>
)
}
}
用户商店
import {observable, computed, action} from 'mobx';
class UserStore {
@observable users = []
@observable activeUser = 2;
@computed get count() {
return this.users.length;
}
@action.bound setActiveUser(){
// I would like to pass in a paramter but not sure if it is possible with @action.bound
this.activeUser = 1;
}
}
var userStore = new UserStore();
export default userStore;
index.js
import userStore from './userStore';
const stores = {
userStore
}
export default stores;
用户
import {observable} from 'mobx';
class User {
@observable firstName
@observable lastName
constructor(firstName = '', asselastNametType = '') {
this.firstName = firstName;
this.lastName = asselastNametType;
}
}
export default User;
observer
不接受任何参数。改为:
@inject('userStore')
@observer
export default class UserPage extends Component {
render() {
let userStore = this.props.userStore;
return <div> test </div>
}
}