javascript - ReactJS 异步渲染

Question

我是 React 的新手，无法针对这种情况编写正确的代码。让我在代码中解释

class Test extends React.Component {
  render() {
    // IndexedDB indexes
    const ids = ['id1', 'id2', 'id3'];

    // fetch data and build a list
    const files = ids.map((id) => 
      localforage.getItem(id).then((entry) => 
        <li key={entry.id}><img src={entry.data} /></li>
      );
    );

    return (
      <ul>{files}</ul>
    )
  }
}

异步加载所有数据并显示的正确方法是什么？

Answer 1

您可以在 componentDidMount Hook 中执行异步逻辑，并使用 setState 将条目放入您的状态。

示例

class Test extends React.Component {
  state = { entries: [] };

  componentDidMount() {
    const ids = ["id1", "id2", "id3"];

    Promise.all(ids.map(id => localforage.getItem(id))).then(entries => {
      this.setState({ entries });
    });
  }

  render() {   
    return (
      <ul>
        {this.state.entries.map(entry => (
          <li key={entry.id}>
            <img src={entry.data} />
          </li>
        ))}
      </ul>
    );
  }
}