Question

我将反应js与mobx一起使用，我试图在提供商中传递商店并使用它但是，它似乎没有通过提供商，我也没有访问它。此外，当我尝试注入UserStore时，Web应用程序失败并抛出UserStore不可用的错误

    import { Switch, Route} from 'react-router-dom';
import React, {Component} from 'react';
import {Router} from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory';
import {Provider} from 'mobx-react'
import { TodoStore,UserStore, ModalsStore} from '../stores'
import App from './App';
import {Login} from '../screens'

const stores = { UserStore}

const browserHistory = createBrowserHistory();





export default class Root extends Component {
    render() {
        return (

            <Provider stores={stores}>
            <Router history={browserHistory}>
                <Switch>
                    <Route exact path='/login' component={Login}/>            
                    <Route  component={App}/>            
                </Switch>
            </Router>
            </Provider>
        )
    }
}

我的App组件

    @observer
export default class App extends Component {
    constructor(props){
        super(props);
        console.log('appProps',props)
    }
    render() {
            ........... 
     }

UserStore

   import {observable,action} from 'mobx'

class UserStore {
    @observable token = false
    @observable first_name = '';
    @observable last_name = '' 



    @action setUser(data) {
        this.token = data.token;
        this.first_name = data.first_name;
        this.last_name = data.last_name;
    }

    @action updateUser(data) {
        this.first_name = data.first_name;
        this.last_name = data.last_name;
    }

    @action setToken(token){
        this.token = token;
    }

}

const singelton = new UserStore()

export default singelton

我尝试使用userStore并且可以访问但是在控制台中我得到了

Answer 1

您必须在@inject('stores')课程中App 像这样：

import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';

@inject('stores') 
@observer
export default class App extends Component {
  render() {
    console.log(this.props.stores);
    
    return (
      <div>{ /* your components */}</div>
    );
  }
}

基本上对于每个班级，如果你想在道具中存储商店，你必须使用inject。

就我个人而言，我更喜欢没有import stores from './UserStore'和Provider的{{1}} 通过这种方式，您可以直接访问商店，并以与inject相同的方式设置任何可观察的内部商店。

以下代码是 MobX 使用单身商店与setState和observer而不使用observable的方式：

setState()

react js react-router-dom store不通过提供者

1 个答案: