API 호출에서 반환 된 객체 배열에 액세스 할 수 없습니다.

Question

API 함수가 여러 번 호출되어 중첩 된 데이터를 mongodb에서 가져 오는 호출이 있습니다.

결과가 배열로 푸시됩니다. 배열은 하위 구성 요소의 소품 데이터로 사용됩니다.

나는 console.log() 결과 배열입니다. 하지만 반응에서 그것을 액세스하거나 그것을 통해 반복 할 수 없습니다.

누구든지이 문제를 정렬하는 방법을 알고 있습니다. 그것은 작동해야합니다. 내가 그럴 이유가 없다. 매우 실망 스럽습니다.

fetchMemory(props) { 
    const tempMemories = []; 
    if (props.journey) { 
    props.journey.memories.map((mem) = > { 
     superagent 
     .get(`/memories/$ { 
      mem 
     }`) 
     .end(function (err, res) { 
      let tp = res.body 
      tempMemories.push(tp) 
     }); 
    }) 
    this.setState({ 
     memories: tempMemories 
    }) 
    } 
} 

setstate에서 반환 된 메모리 배열에 액세스 할 수 없습니다. 당신이 콘솔에서 그것들을 검사한다면 그것들은 보여줄 것입니다/그것은 자식 구성 요소 (소품으로서)에서 단지 오류를 반환합니다.

"TypeError: Cannot read property 'memories' of undefined"

미리 감사드립니다.

Answer 1

axis를 통해 데이터를 가져 오는 것은 비동기이므로 네트워크 호출이 아직 완료되지 않았으므로 기본적으로 tempMemories은 setState() 호출에서 비어있게됩니다. 그래서 기본적으로 각 요소에 대한 하나의 약속을 만들

const promiseList = props.journey.memories.map(mem => { 
    return superagent 
    .get(`/memories/${mem}`) 
    .then(res => res.body); 
}); 

Promise.all(promiseList) 
    .then(results => { 
    this.setState({ 
     memories: results 
    }); 
    }) 
    .catch(err => { 
    ... 
    }); 

을 다음 setState() 호출을하기로 결심 얻을 그들 모두 대기 :

이 같은 Promise.all를 사용해야합니다.