我正在尝试创建一个上下文来存储我的应用程序所需的所有信息,下面的代码有效,但我确实有限制,这是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
现在我的目标是在任何组件上实现 aAPIContainer
或访问该函数,我尝试使用 props 没有奏效!
componentDidMount = () => {
this.props.api.auth();
}
请指教