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;

类应用程序扩展组件{
状态={
系列选项：[]
}
fetchData=（符号）=>{
var url='someurl'
var=this
xhr({
url:url
}，功能（e，d）{
if（e）{console.log（e）；}
否则{
var serieoptions='要计算的某些操作'
that.setState（{serieoptions}）
}
});
}
createChart=（）=>{
Highcharts.stockChart（‘容器’{
系列：this.state.series选项，
});
}
componentDidMount（）{
这个.fetchData（'somestocksymbol'）；
这个.createChart（）；
}
render（）{
返回(
);
}
}
导出默认应用程序；

serieoptions

所做的只是存储从数据库中获取的数据和

setState

。我查看了控制台日志，发现区别在于createChart是在fetchData之前调用的，尽管在代码中fetchData是Previor。 然后我尝试调用createChart inside

fetchData

，它可以工作！ 因此，我想知道如何更改代码，并且仍然可以独立调用createChart。

---

另外，我想知道这个问题的根本原因。

这两条线是一切的关键

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

---

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

这两行是一切的关键

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

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

这是因为

xhr（）

函数是异步的，在调用传入函数之前，它在单独的线程上执行其逻辑

因此，如果您想说，在

fetchData（）

的第一行添加一个log函数，您会看到它首先执行，但是

xhr（）

调用在另一个线程上异步运行，允许在第一行继续执行（并让

this.createChart（）

运行）。

它是因为

xhr（）调用

函数是异步的，因为它在调用传入函数之前在单独的线程上执行其逻辑

---

因此，如果您想说，在

fetchData（）

的第一行添加一个log函数，您会看到它首先执行，但是

xhr（）

调用在另一个线程上异步运行，允许在第一行继续执行（并让

this.createChart（）

运行）。

谢谢！我承诺获取数据，现在就可以了。还有其他方法吗？您可以在

setState

之后调用

createChart

。而不是在下一行，因为这也是异步的，但是通过这种方式，

that.setState（{serieoptions}，that.createChart）

，传递回调谢谢！我承诺获取数据，现在就可以了。还有其他方法吗？您可以在

setState

之后调用

createChart

。而不是在下一行，因为这也是异步的，但是通过这种方式，

that.setState（{serieoptions}，that.createChart）

，传递回调