Reactjs React console.log不显示状态数组值

在React中，我有一个名为addOrder的函数，它将带有参数值的对象添加到名为data的状态中。 当我尝试console.log（this.state.data）时，出于某种原因，我得到了一个空数组。 当我再次单击调用addOrder函数的按钮时，我得到一个数组，其中包含具有参数值的对象。 为什么console.log在我第一次单击按钮时不显示数组值

import React, { Component } from 'react';



class App extends Component {
  constructor(){
    super()
    this.state = {
      data:[]
    }

  }


addOrder(parameter1, parameter2, parameter3){
  this.setState({
    data:this.state.data.concat(
        {
         one:parameter1,
         two:parameter2,
         three:parameter3
        }
     )          
  });

  console.log(this.state.data);
}


  render() {

    return (
      <div>
            <button onClick={() => this.addOrder('1','2','3')}>ok</button>
      </div>
    )
  }
}

export default App;

import React，{Component}来自'React'；
类应用程序扩展组件{
构造函数（）{
超级（）
此.state={
数据：[]
}
}
添加顺序（参数1、参数2、参数3）{
这是我的国家({
数据：this.state.data.concat(
{
一：参数1，
二:参数二,，
三：参数3
}
)          
});
console.log（this.state.data）；
}
render（）{
返回(
this.addOrder（'1'，'2'，'3'）}>ok
)
}
}
导出默认应用程序；

我希望console.log显示[{one:“1”，two:“2”，three:“3”}]，但我得到的却是空数组[]

addOrder(parameter1, parameter2, parameter3){
 this.setState({
  data:this.state.data.concat(
    {
     one:parameter1,
     two:parameter2,
     three:parameter3
    }
   )          
  },()=>console.log(this.state.data));
 }

---

尝试这种方式

设置状态是一个异步函数。setState的第二个参数是回调，因此您可以使用它来知道函数何时完成。

调用setState（）是异步的，因此javascript编译器不会等待setState完成。因此它会到达下一行并打印console.log语句，因为此时您的状态没有更新，并且数据数组为空，所以它会将空数组打印到控制台

setState（）还附带了一个回调，在状态更新后执行

你可以试试这个

this.setState({
data:this.state.data.concat(
    {
     one:parameter1,
     two:parameter2,
     three:parameter3
    }
 )          
}, () => console.log(this.state.data));

现在行吗