使用 componentDidMount 或从另一个文件调用未声明的函数

Question

我正在尝试创建一个上下文来存储我的应用程序所需的所有信息，下面的代码有效但我确实有限制，这是 Api.js 我想放置所有逻辑和 API requests/responses.

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;

This App.js <Routes /> is a basic react router with few paths

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

现在我的目标是在 APIContainer 中实现 componentDidMount 或访问任何组件上的功能，我尝试使用 props 没有成功！

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

请指教

Answer 1

作为您的代码，api.auth() 仅在 Subscribe 中有效，在 componentDidMount 中无效。

如果你想 auto-auth 在 componentDidMount，你应该制作一个子组件，然后将 auth() 传递给它。

我给你举了个例子。你可以在控制台看到你想要的。

a unstated example

使用 componentDidMount 或从另一个文件调用未声明的函数

Calling unstated function using componentDidMount or from another file

reactjs

react-context

unstated