非同期の2つの値の更新をレンダリングする正しい方法は何ですか？

私はコンボボックス非同期の2つの値の更新をレンダリングする正しい方法は何ですか？

の値を取得するためのコンボボックス

その他の変数のオプションを取得するために、AJAX

つの変数をシミュレートするために、2つの非同期機能を使用してしかし、ページの読み込みコンボボックスです原点の値が「0」になって更新されません。

index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 

ReactDOM.render(
    <App />, 
    document.getElementById('root') 
);

App.js

import React, { Component } from 'react'; 

const Select = ({ options=[], keyOfName, placeholderMessage, defaultValue="-1" }) => { 
    return (
    <select required defaultValue={defaultValue}> 
     <option disabled value="-1">{placeholderMessage}</option> 
     { 
     options.map(function (option, index) { 
      return (
      <option key={index} value={index}> 
       {option} 
      </option> 
     ); 
     }) 
     } 
    </select> 
) 
} 

class Bug extends Component { 
    constructor(){ 
    super(); 
    this.state = {index: 0} 
    let self = this; 
    setTimeout(()=>{ 
     console.log("before setState :" + this.state.index); 
     self.setState({index: 1}); 
     console.log("after setState :" + this.state.index); 
    }, 2000); 
    } 

    render(){ 
    return (
     <Select 
     options={this.props.options} 
     defaultValue={this.props.options ? this.state.index : -1} 
     placeholderMessage="Seleccione una Cuenta" 
     /> 
    ) 
    } 
} 

class App extends Component { 
    constructor(){ 
    super(); 
    this.state = {options: []}; 
    let self = this; 
    setTimeout(()=>{self.setState({options: ["ji", "xo"]})}, 2000); 
    } 

    render() { 
    return (
     <div> 
     <Bug options={this.state.options}/> 
     </div> 
    ); 
    } 
} 

export default App;

index.htmlを

<!doctype html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> 
    <title>React App</title> 
    </head> 
    <body> 
    <div id="root"></div> 
    </body> 
</html>

これは出力