arrays - React this.state 未定义数组

Question

我对 React 有疑问。我有一个传递给 this.state 的数组。但我遇到了一个问题，我无法访问数组中的子元素。就我而言，我无法访问 this.state.folders[0]。

这是我的代码:

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 的内容:

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

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

提前致谢!

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 之后。