reactjs - 使用 API 调用 unstated.js (React Context API) 初始化容器
问题描述
我想使用unstated.js(React 上下文包装器)使用来自 api 调用的数据简单地初始化容器状态。
我看到了一个例子,其中 Container 是用几个 var 实例化的:
import { Container} from 'unstated';
class WordlistContainer extends Container {
constructor(...words) {
super();
this.state = {
words: words
};
}
}
let wordList = new WordlistContainer('word1', 'word2');
export default wordList;
如果我想获取一些 api 数据以传递到此容器的状态 - 这是正确的方法吗?或者我应该从父组件传递道具?这是为了在首次加载时将数据加载到 SPA 中。
解决方案
这最终起作用了:
import React, { Component } from 'react';
import RDOM from 'react-dom';
import { Container, Provider, Subscribe } from 'unstated';
class ApiContainer extends Container {
state = {
loading: true,
data: null
}
setApiResponseAsState = async () => {
fetch.('someapi').then(res => res.jsoj()).then( data => this.setState({ data, loading: false });
}
}
class ApiConsumer extends Component {
async componentDidMount() {
this.props.setApiResponseAsState();
}
render() {
return <div>{this.props.state}</div>
}
}
RDOM.render(
<Provider>
<Subscribe to={[ApiContainer]}>
{ props => <ApiConsumer {…props} />
}
</Subscribe>
</Provider>
, document.querySelector("#root");
)
推荐阅读
- git - 通过 RAD Studio 10.3 IDE 上的 ssh 使用 git 存储库连接进行项目设置
- app-store-connect - 您可以使用 Transporter 仅上传应用元数据吗?
- asp.net - ASP.Net Core 3.0 应用程序启动异常'路由模板中的参数不完整'
- amazon-web-services - 如何通过 AWS Organizations 创建的根账户新访问?
- powerbi - Power BI:为什么 EARLIER() 不识别日期列?
- spring - 如何为 WebClient 设置基本 url 和查询参数?
- javascript - 如何设置列和容器的最大高度,以便图像适合引导程序 4 中的整个页面?
- spring - Spring websocket - 客户端CORS策略错误
- python - 如何在django模型中从今天减去一个日期
- express - 服务器发送的事件为单个客户端创建了太多的侦听器