React Native 获取和渲染 json

Question

所以我刚开始使用 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。但是，如果我不能等待我的内容到达，我该如何渲染它？

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

}