React Native fetch and render json

Question

所以我刚开始使用React Native，我想获取一些json，然后渲染一些组件。因此，我创建了一个函数loadDocument((，它返回json和一个函数assemblyDocument(([/em>，看起来像这样：

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

但问题是：我不能在异步函数之外使用wait。但是，如果我不能等待我的内容到达，我该如何呈现它？

Answer 1

您应该将文档加载和它的组装分开。也许这样的东西对你有用。

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);
}