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挂钩中执行异步逻辑，并用于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>
    );
  }
}