mobX + React 无法注入

Question

我有这个问题，我看了答案，但不能解决我的问题。

错误提示我 'TypeError: Cannot read property 'changeUsername' of undefined'。

代码如下：

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

@inject(['loginStore'])  
@observer
class login extends Component {


    changeUsername = (e) => {
        debugger;
        this.props.loginStore.changeUsername(e.target.value)
    }

    changePassword = (e) => {
        debugger;
        this.props.loginStore.changePassword(e.target.value)
    }



}

Answer 1

您需要确保已使用您的应用程序注册商店实例。这是通过 Provider 组件完成的（参见下面的示例）。

<Provider> 确保您的应用程序中的嵌套组件可以访问登录存储 - 在您的例子中是登录组件。需要注意的一些关键概念是：

必须定义商店对象
必须通过 <Provider/> 注册商店实例（参见下面的示例）
存储然后可以被组件访问
@inject 可用于 select 并将特定商店注入组件（即在复杂应用程序定义了许多商店的情况下）

此代码示例有望为您传达这些概念：

import {observer, Provider, inject, action } from 'mobx-react';

/*
Define your loginStore
*/
class LoginStore  {
    @action
    changeUsername(value) {
        console.log(value)
    }

    @action
    changePassword(value) {
        console.log(value)
    }
}

@inject('loginStore')
@observer
class login extends Component {

    /* Declare member function in this way, rather than as lambda function */
    changeUsername(e) {
        debugger;
        this.props.loginStore.changeUsername(e.target.value)
    }

    /* Declare member function in this way, rather than as lambda function */
    changePassword(e) {
        debugger;
        this.props.loginStore.changePassword(e.target.value)
    }

    render() {
        return <p>hello world</p>
    }
}

/*
You need to register your store with the provider
*/
const app = (
<Provider loginStore={ new LoginStore() }>
    <login />
</Provider>  
);

ReactDom.render(app, container);

Answer 2

@Dacre丹尼你好，我不知道怎么回复，所以我@你。

我是按照你说的方式使用的，id router code use '' follow:

import * as stores from '../stores';

export default class Container extends BasePage{

    render(){
        
        return(
            <Provider { ...stores}>
                <Router>
                        <Switch>
                            <Route path="/login" component={login}/>
                            <Route path="/reg" component={reg}/>
                            <Route path="/404" component={NotFound}/>
                            <Route path="/main" component={mainindex}/>
                            <Route path="/react" component={App}/>
                            <Route component={adminmain}/>
                        </Switch>
                </Router>
            </Provider>
        )
    
    }
}

Answer 3

您在数组中注入了商店名称。它应该只是一个参数

@inject('loginStore')

其中 `loginStore' 是您的商店文件中的任何导出内容。

mobX + React 无法注入

mobX + React can't inject

reactjs

mobx