非同期で取得されたListItemコンポーネントをMaterial-UI ListのReactコンポーネントの状態から使用する

Question

Listコンポーネントfrom http://www.material-ui.com/#/components/listは非同期受信要素を表示しません。

私はコンポーネントのrender（）メソッドでは私のリストを使用する方法：私の状態を充填

<List children={this.state.elements} /> 

：

constructor(props) { 
    super(props); 
    this.state = {elements: []}; 
} 

async componentDidMount() { 
    this.setState({elements: this.getInitialState()}); 
} 

async getInitialState() { 
     var elements = []; 
     const response = await fetch('api/endpoint/elements'); 
     const result = await response.json(); 
     if (result.status = "success") { 
      elements.push(<ListItem primaryText="Dummy Data" />); 
     } 
     return elements; 
    } 

Answer 1

componentDidMountのgetInitialStateを待つ必要があります。

async componentDidMount() { 
    const state = await this.getInitialState(); 
    this.setState({elements: state}); 
} 

あなたは

setStateAsync(state) { 
    return new Promise((resolve) => { 
     this.setState(state, resolve) 
    }); 
    } 

Answer 2

コンセプトは大丈夫ですと動作するはずです。

componentDidMountは、小さなアプリケーション用の非同期ロジックを追加する場所です（大きなアプリケーションの場合は、sagas、reduxなどを参照してください）。

問題は、setStateは非同期関数ではないため、コンポーネントの状態を正しく設定できないということです。

単純にすべてのajaxロジックコンポーネントを移動します.DadMountは、ajaxが解決すると状態を変更します。

私は待っていて、それを試したことがないので、私はそれはそれで動作することを確認したが、約束と、それは100％の作品ができない（例えばフェッチ）

小さな擬似コード：

​​