使用API调用unstated.js初始化容器(React )
使用API调用unstated.js初始化容器(React )
提问于 2018-09-05 04:47:42
我想简单地使用来自api调用的数据来初始化容器状态，使用unstated.js (一个React包装器)。
我看到了一个用几个vars实例化容器的例子：
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第一次加载时将数据加载到SPA中。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-09-06 06:31:06
这样做的结果是：
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");
)Stack Overflow用户
发布于 2018-12-05 15:45:20
一个直截了当的方法是使用容器的实例.一个用于WordlistContainer的示例实现
export default class WordlistContainer extends Container {
fetchWords = async () => {
const result = await fetch('https://example.com')
const words = await result.json()
this.setState({ words })
}
// etc... the rest of the container's code
}
// in this and most cases we want a singleton (but other instances can be created)
const wordlistContainer = new WordlistContainer()
export const getWordlistContainerInstance = () => wordlistContainer
然后，在提供程序中插入此实例，如：
<Provider inject={[getWordlistContainerInstance()]}>
通过调用getWordlistContainerInstance().fetchWords()，可以在任何地方触发抓取
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52177244
复制相关文章
相似问题
腾讯云开发者
