反应this.state undefined数组

Question

我遇到了React问题。 我有一个数组，我传递给this.state。但是我面临一个问题，我无法访问数组中的子元素。在我的情况下，我无法访问this.state.folders [0]。

这里是我的代码：提前

// console.log(this.state.folders); 
     [] 
    0: "Commun" 
    1: "Privé" 
    2: "Public" 
    length: 3 

//console.log(this.state.folders[0]); 
    undefined 

感谢：

class DriveContent extends Component { 
    constructor() { 
     super(); 
     let list_files = []; 
     let list_folders = []; 
     axios.get('/api/getFilesAndFolders').then((response) => { 
      for (var i = 0; i < response.data.length; i++) { 
       if (response.data[i]["isFile"] ==true){ 
        list_files.push(response.data[i]); 
       } 
       else { 
        list_folders.push(response.data[i]); 
       } 
      } 
     }).catch((error) => { 
      console.error(error); 
     }); 

     this.state = {files: list_files, folders: list_folders}; 
     console.log(this.state.folders); 
     console.log(this.state.folders[0]); 
    } 

这里就是退还2的console.log！

Answer 1

您正在设置状态过快。在回调函数中，在分配给list_files和list_folders后需要setState，因为在构造函数完成后执行回调。试试这个：

for (var i = 0; i < response.data.length; i++) { 
    if (response.data[i]["isFile"] ==true){ 
     list_files.push(response.data[i]); 
    } 
    else { 
     list_folders.push(response.data[i]); 
    } 
} 
// setState here: 
this.setState = {files: list_files, folders: list_folders}; 

然后移动你的console.logs到你的渲染函数来查看正在更新的状态。一旦进行初始构建并在setState之后再次进行。