React this.state undefined array

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後にもう一度。