所以我刚刚开始使用 React Native,我想获取一些 json 并随后渲染一些组件。因此,我创建了一个返回 json 的函数 loadDocument() 和一个如下所示的函数 assembleDocument():
function assembleDocument() {
return new Promise((resolve) => {
loadDocument().then((doc) => {
const first_row = doc.paragraphs[0].rows[0].blocks
let container
for (let block = 0; block < first_row.length; ++block) {
container += <HanziBlock hanzi={first_row[block].hanzi} pinyin={first_row[block].pinyin} />
}
resolve(container)
});
});
}
一切似乎都工作得很好,该函数返回一个包含我的“HanziBlock”组件的对象。现在我只需要渲染它:
export default function HomeScreen() {
let content = await assembleDocument()
return content;
}
但问题是:我无法在异步函数之外使用await。但如果我等不及内容到达,我该如何渲染它?
最佳答案
您应该将文件加载和组装分开。也许这样的东西适合你。
constructor() {
this.state = { doc: null };
}
componentDidMount() {
loadDocument().then((doc) => this.setState({ doc }));
}
render() {
if (this.state.doc === null) {
return 'Loading';
}
return assembleDocument(this.state.doc);
}
关于javascript - React Native 获取并渲染 json,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60987621/