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