reactjs - MobX，Store 不可用，请确保它是由某些提供商提供的

Question

注意:即使有一些与我类似的问题，我的情况也没有满意的答案!!!

在我的 react-native 项目中，我使用 mobx 作为状态管理。我的 Login.js 文件的某些部分如下所示:

       export default class Login extends React.Component {
          @observable isLogged = true;
        .
        .
        .
        .
    render() {
        return (
          <Provider store = {Login}>
            <View style={styles.container}>

            <TextInput
              style={styles.input}
              placeholder='Kullanıcı Adı'
              autoCapitalize="none"
              placeholderTextColor='white'
              onChangeText={val => this.onChangeText('username', val)}


       /> 
        .
        .
        .

我的 App.js 文件的某些部分如下所示:

    .
    .
    .

    @inject('store')
    @observer
    export default class App extends React.Component{
      // @action(self =>({
      //   changeControl(){console.log("CHANGE CONTROL CALISTI")}
      // }))  

      state = {
      control : false
     }
     render(){

        console.log("ISLOGGED DEGERI:" ,Login.isLogged)

        if (this.props.store.isLogged)
        {
          return (
            <AppDrawerNavigatorLogged/ >
          );
        }
        else
        {
          return (
            <AppDrawerNavigatorNotLogged/ >
          );
        }

      }

    }
    .
    .
    .

看起来，我有一个 isLogged 可观察变量，我在 Login.js 文件中使用 Provider 和一个商店，我想在我的 App.js 文件中使用 isLogged 可观察变量。然而，即使我在 Login.js 文件中使用 Provider，我也会收到如下错误:

错误:MobX 注入(inject)器:商店“商店”不可用!确保它是由某个提供商提供的。

有没有人遇到过这个问题或者有什么想法？谢谢...

Answer 1

似乎您缺少 mobx 的一些核心概念和 mobx-react .我建议首先修复一些错误:

• <Provider>组件应该包装你的整个应用程序。在大多数情况下，它大约是 <App>组件 ( <Provider store={loginStore}><App/></Provider> )
• Login在你的情况下是 React.Component - 这是不对的。您需要创建一个 Login类并将其实例传递给 Provider

例子:

class Login {
    @observable isLogged = true;

    // some methods for log in
}

const loginStore = new Login();

class App extends React.Component {
...

   render(){
       return (
           <Provider store={loginStore}>
               <App />
           </Provider>
       ) 
   }
}