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

【问题标题】：React console.log not showing state array valuesReact console.log 不显示状态数组值
【发布时间】：2019-04-30 09:04:16
【问题描述】：

在 React 中，我有一个名为 addOrder 的函数，它将带有参数值的对象添加到称为数据的状态中。当我尝试 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;

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

【问题讨论】：

标签： reactjs

【解决方案1】：

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

setState() 还带有一个回调，当您的状态更新时执行。

你可以试试这个

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

现在可以正常使用了

【讨论】：

【解决方案2】：

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

试试这个方法

【讨论】：

【解决方案3】：

setState 是一个异步函数。 setState 的第二个参数是一个回调，因此您可以使用它来了解函数何时完成。

【讨论】：