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