Reactjs MobX，商店不可用，请确保它是由某个提供商提供的

注意：即使有一些与我类似的问题，在我的情况下也没有令人满意的答案

在我的react原生项目中，我使用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)}


       /> 
        .
        .
        .

    .
    .
    .

    @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/ >
          );
        }

      }

    }
    .
    .
    .

导出默认类登录扩展React.Component{
@可观察isLogged=真；
.
.
.
.
render（）{
返回(
this.onChangeText（'username'，val）}
/> 
.
.
.

我的App.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)}


       /> 
        .
        .
        .

    .
    .
    .

    @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/ >
          );
        }

      }

    }
    .
    .
    .

。
.
.
@注入（'存储'）
@观察者
导出默认类App扩展React.Component{
//@action（self=>({
//changeControl（）{console.log（“changecontrolcalisti”）}
// }))  
状态={
控制：错误
}
render（）{
log（“ISLOGGED DEGERI:”，Login.ISLOGGED）
if（this.props.store.isloged）
{
返回(
);
}
其他的
{
返回(
);
}
}
}
.
.
.

看起来，我有一个isLogged的可观察变量，我在Login.js文件中使用了一个提供程序和一个存储，我想在App.js文件中使用isLogged的可观察变量。但是，即使我在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)}


       /> 
        .
        .
        .

    .
    .
    .

    @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/ >
          );
        }

      }

    }
    .
    .
    .

错误：MobX注入器：存储“存储”不可用！请确保它由某些提供商提供。

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

---

谢谢…

您似乎缺少了

mobx

和

mobx react

的一些核心概念。我建议首先修复一些错误：

• 组件应该包装整个应用程序。在大多数情况下，它是围绕
  组件（
  ）

• Login

  在您的情况下是一个

  React.Component

  -这是不对的。您需要创建一个

  Login

  类，并将其实例传递给

  提供者

例如：

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>
       ) 
   }
}

类登录{
@可观察isLogged=真；
//一些登录方法
}
const loginStore=新登录（）；
类应用程序扩展了React.Component{
...
render（）{
返回(
) 
}
}

存储在哪里？您必须创建包含可观察的

isLogged

的存储，然后将其传递给提供商：@AlessandroBottamedi，我是react native和mobx的新手。我不知道如何将代码从我的编辑器写入此处，我已经编辑了该部分。存储是登录组件。它仍然不工作吗？是否有任何问题dea怎么了？