反应：数组包含元素，但array.length输出到控制台为零

Question

所以我想在更新状态后调用addOption，并且我知道React中的setState是异步的，因此我将addOption完全放在setState之后作为回调执行：

  a_method{
    this.setState({
      songRec: songList,
    }, this.addOption);
  }

但是，在我的addOption方法中，当我注销songRec时，我可以看到它已明确更新，但其长度仍为0，因此从未执行过for loop。

  addOption(){
    const songRec = this.state.songRec;
    var datalist = document.getElementById("data");
    var options = '';
    console.log(songRec);
    console.log(songRec.length);
    for (var i = 0; i < songRec.length; i++){
       //some code//
    }
    datalist.innerHTML = options;
  }

这是控制台上的输出。第86行记录songRec，第87行记录songRec.length。

您知道发生了什么事以及如何解决它吗？

Answer 1

在javascript console.log中，它不会立即在您设置的行中执行（在每个浏览器中都会有所不同），在这种情况下，应将其更改为debugger，以查看是什么真的在继续。是否有运行此回调函数的特定原因？您不能使用在状态上设置的数据来执行其他功能吗？

Answer 2

问题很可能是由数组上的异步函数引起的。请参考以下示例：

function asyncFunction(list){
 setTimeout(function(){
    list.push('a');
    list.push('b');
    list.push('c');
    console.log(list.length); // array length is 3 - after two seconds
 }, 2000); // 2 seconds timeout
}

var list=[];
//getting data from a database
asyncFunction(list);
console.log(list.length) //array is length zero - after immediately
console.log(list) // console will show all values if you expand "[]" after two secon

要解决此问题，您可能需要使用的解决方法是对异步部分使用promise。

function asyncFunction(list){
 return new Promise(resolve => {
  setTimeout(function(){
    list.push('a');
    list.push('b');
    list.push('c');
    resolve(list);
    console.log(list.length); // array length is 3 - after two seconds
  }, 2000);  
  });
 // 2 seconds timeout
}

async function getList(){
  var list=[];
  await asyncFunction(list);  
  console.log(list.length) ;
  console.log(list);
}
getList();