反应本机 MobX 商店 - MobX 注入器：商店不可用

Question

我正在使用以下模板：https://github.com/cawfree/create-react-native-dapp

我在顶级（父）组件中使用了提供程序组件，如下所示：

import { Provider } from 'mobx-react';
import SettingsStore from '../../store/settings';

return (
    <Provider store={SettingsStore}>
      <View style={[StyleSheet.absoluteFill, styles.center, styles.white, !loading && {justifyContent: 'space-between'}]}>
        {loading ? 
          <FadeOutImage /> 
        : 
          <Welcome />
        }
      </View>
    </Provider>
  );

这是我在文件 settings.js 中的 SettingsStore：

import {makeAutoObservable} from 'mobx';

class SettingsStore {
    darkMode = false

    constructor() {
        makeAutoObservable(this)
    }

    toggleDarkMode = () => {
        this.darkMode = !this.darkMode
    }
}
  
export default new SettingsStore();

下面是我注入店铺的地方。这是子组件 <Welcome />:

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

const Welcome () => {
  return (<View><Text>test</Text></View>)
}

export default inject("SettingsStore")(observer(Welcome));

我已经检查过导入路径是否正确（否则会出现另一个错误）。我只是不明白为什么我会看到以下错误：

出了什么问题，我该如何解决？

Answer 1

您将名称 store 传递给 Provider（<Provider store={SettingsStore}>)，因此在注入时您需要使用相同的 prop 名称 inject("store")。或者将 prop 名称更改为SettingsStore: <Provider SettingsStore={SettingsStore}>

反应本机 MobX 商店 - MobX 注入器：商店不可用

React native MobX store - MobX injector: Store is not available

react-native

mobx

mobx-react