Question

在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”，两个：“ 2”，三个：“ 3”}]，但是我却得到了空数组[]

Answer 1

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

尝试这种方式

Answer 2

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

Answer 3

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

setState（）还带有一个回调，该回调在您更新状态后执行。

您可以尝试

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

现在可以正常工作

反应console.log不显示状态数组值

3 个答案: