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

但问题是：我不能在 async 函数之外使用 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);
}