Question

我是一名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。另外，我想知道这个问题的根本原因。

Answer 1

这两行是一切的关键。

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

新人可以想到的是，当第二行执行时，第一行完成了所有工作。但事实并非如此。这是因为在第二行开始ajax调用之前，你的第一行肯定会做的唯一事情。然后，这是一个异步调用，所以继续执行第二行，你不知道第一行何时完成它的工作。在某些时候，ajax调用会收到响应并最终设置状态。

Answer 2

因为xhr()函数是异步的，因为它在调用你的传入函数之前在一个单独的线程上执行它的逻辑。

因此，如果您要说，在fetchData()的第一行添加一个日志函数，您会看到它首先执行，但xhr()调用是异步在另一个线程上运行，允许执行继续第一次（并让this.createChart()运行）。

反应组件方法执行顺序

2 个答案: