es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

React Native MobX Store – Inyector MobX: La tienda no está disponible.

19 Jul, 2023 Programación

Estoy utilizando la siguiente plantilla: https://github.com/cawfree/create-react-native-dapp

He utilizado el componente proveedor en el componente de nivel superior (padre) de la siguiente manera:

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></fadeoutimage> 
        : 
          <welcome></welcome>
        }
      </view>
    </provider>
  );

Aquí está mi SettingsStore en el archivo settings.js:

import {makeAutoObservable} from 'mobx';

class SettingsStore {
    darkMode = false;

constructor() {
    makeAutoObservable(this);
}

toggleDarkMode = () => {
    this.darkMode = !this.darkMode;
}
}

export default new SettingsStore();

Lo siguiente es donde estoy inyectando el store. Es el componente hijo :

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

const Welcome = () => {
  return (<view><text>test</text></view>);
}

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

He comprobado que las rutas de las importaciones son correctas (de lo contrario, obtendría otro error). Simplemente no puedo entender por qué veo el siguiente error:
enter image description here

¿Qué está saliendo mal y cómo puedo solucionarlo?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El mensaje de error “MobX observer: ¡El almacén ‘undefined’ no está disponible! Asegúrate de que esté proporcionado por algún Proveedor” sugiere que el componente hijo Welcome no puede acceder al SettingsStore del componente proveedor.

    Una posible explicación para este error es que la inyección del almacén es incorrecta en el componente hijo Welcome. Aquí, se inyecta como SettingsStore, pero debería inyectarse como store, ya que así está definido en el componente proveedor.

    Por lo tanto, el código de inyección correcto para Welcome debería ser:

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

    Después de realizar este cambio, el componente Welcome debería poder acceder al objeto SettingsStore del componente proveedor y el mensaje de error debería desaparecer.

Comments are closed.