반응이 상태. 정의되지 않은 배열

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 후에 다시 한번.