反应 this.state 未定义的数组

Posted 2023-02-22

【中文标题】反应 this.state 未定义的数组

【英文标题】：React this.state undefined array

【发布时间】：2018-05-09 07:48:36

【问题描述】：

我对 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

提前致谢！

【参考方案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 之后。

【讨论】：

效果很好，非常感谢您的解决方案和解释！

很高兴听到这个消息。在开发时始终在您的渲染函数中使用它会很方便：console.log('render', this.props, this.state); 这样您就可以查看所有更新，还可以查看是否需要优化以使用 shouldComponentUpdate 函数减少重新渲染。