Вызов неустановленной функции с использованием componentDidMount или из другого файла

Question

Я пытаюсь создать контекст для хранения всей информации, необходимой для моего приложения, приведенный ниже код работает, но у меня есть ограничения, это Api.js, где я хочу разместить все запросы и ответы логики и API.

import { Provider, Subscribe, Container } from "unstated";
import fire from "./config/Fire";

class APIContainer extends Container {
  constructor(props = {}) {
    super();
    this.state = {
      loggedIn: false,
      loading: null,
    };
  }
  async auth() {
    fire.auth().onAuthStateChanged((user) => {
      if (user) {
        this.setState({ loggedIn: true, loading: false });
      }
      else {
        this.setState({ loggedIn: false, loading: false });
      }
    });
  }
}

const Api = {
  Instance: new APIContainer(),
  Provider,
  Subscribe
};

export default Api;

Этот App.js <Routes /> является базовым реагирующим маршрутизатором с несколькими путями

 <Api.Provider inject={[Api.Instance]}>
    <Routes />
 </Api.Provider>

В компонентах я могу использовать контекст, но только в методе рендеринга, например:

<Api.Subscribe to={[Api.Instance]}>
{api => (
   <p>String(api.state.loggedIn)</p>
   <button onClick={() => api.auth()}>run</button>
  )}
 </Api.Subscribe>

Теперь моя цель - либо внедрить componentDidMount в APIContainer, либо получить доступ к функции на любом компоненте, который я пробовал с подпорками, но это не сработало!

componentDidMount = () => {
 this.props.api.auth();
}

Пожалуйста, сообщите

Answer 1

Как ваш код, api.auth(), действительный только внутри подписки, недействителен при componentDidMount.

Если вы хотите выполнить авто-авторизацию на componentDidMount, вы должны создать дочерний компонент и передать ему auth().

Я сделал для тебя пример. Вы можете видеть, что вы хотите на консоли.

неустановленный пример