Reagiere this.state undefined array

Question

Ich habe ein Problem mit React. Ich habe ein Array, das ich zu this.state übergeben. Aber ich habe ein Problem, ich kann nicht auf die Unterelemente im Array zugreifen. In meinem Fall kann ich nicht auf this.state.folders [0] zugreifen.

Hier ist mein Code:

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]); 
    } 

Hier ist das, was die die 2 console.log zurück:

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

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

Vielen Dank im Voraus!

Answer 1

Sie setzen den Status zu früh. In Ihrer Callback-Funktion müssen Sie setState nach dem Zuweisen zu list_files und list_folders, da der Rückruf ausgeführt wird, nachdem der Konstruktor abgeschlossen ist. Versuchen Sie Folgendes:

Verschieben Sie dann Ihre console.logs zu Ihrer Renderfunktion, um den Status zu sehen, der aktualisiert wird. Einmal bei der Erstinstallation und noch einmal bei SetState.