ReactJS异步渲染

我是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) => 
        

      );
    );

    return (
      
{files}
    )
  }
}

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

您可以在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 (
      

        {this.state.entries.map(entry => (
          

            
          
        ))}
      
    );
  }
}