javascript - react 组件方法执行顺序

我是一个React初学者，试图编写一个简单的快速反应股票图表应用程序，而React app.js中有两个功能。一种是获取数据，另一种仅是绘制数据。这是简化的代码：

class App extends Component {
  state = {
    seriesOptions: []
  }

  fetchData =(symbol)=>{
    var url = 'someurl'
    var that = this
    xhr({
      url: url
    }, function(e,d){
        if(e) {console.log(e);}
       else {
         var seriesOptions = 'some operation to calculate'
         that.setState({seriesOptions})
       }
    });
  }

  createChart=()=>{
    Highcharts.stockChart('container', {
      series: this.state.seriesOptions,
    });
  }

  componentDidMount() {
    this.fetchData('some stock symbol');
    this.createChart();
  }

  render() {
    return (
      <div className="App">
        <div id="container"></div>
      </div>
    );
  }
}

 export default App;

seriesOptions的作用只是存储从数据库和setState提取的数据。我查看了控制台日志，发现不同之处在于即使在代码fetchData之前，createChart在fetchData之前被调用。
然后我尝试在fetchData内调用createChart，它起作用了！
所以我想知道如何更改代码，仍然可以独立调用createChart。
另外，我想知道此问题的根本原因。

最佳答案

这两行是一切的关键。

this.fetchData('some stock symbol');
this.createChart();

新来者可能会想到的是，在执行第二行时，第一行已经完成了所有工作。但事实并非如此。这是因为在第二行开始ajax调用之前，第一行肯定会做的唯一事情。然后，这是一个异步调用，因此执行从第二行开始，您不知道第一行何时完成工作。在某个时刻，ajax调用接收其响应并最终设置状态。