ReactJS, 다중 가져 오기 및 데이터 렌더링

Question

저는 React에 대해 처음 보았습니다. 저는 첫 번째 React 프로젝트에서 며칠 동안 데이터를 가져 오는 데 어려움을 겪었습니다.

기본적으로 카드 목록과 카드 목록, 카드의 두 구성 요소가 있습니다. 제가하려는 것은 각 카드에 대한 데이터를 얻는 것입니다. 내 문제는 단일 종단점에서 가져 오기가 어떻게 작동하는지 거의 알지 못했기 때문에 여러 종단점에서 동시에 데이터를 가져 오려고하면 저를 이길 것 같습니다.

나는 가져 오기 설명하는 블로그에서 예를 들어 다음과 같은 시도하고,이 함께했다 :

export default class CardsList extends React.Component { 
constructor(props) { 
    super(props); 

    this.state = { 
     details: [], 
     attachments: [] 
    }; 
} 


componentDidMount() { 

    //API and DEFAULT_QUERY have been set here, don't mind the ellipses 
    var API = '...'; 
    var DEFAULT_QUERY = this.props.data; 


    var apiRequest1 = fetch(API + DEFAULT_QUERY, { 
     method: 'GET', 
     headers: { 
      'Accept': 'application/json', 
      'Content-Type': 'application/json', 
     }, 
     credentials: 'include', 
    }).then(response => response.json()); 

    var apiRequest2 = fetch(API + DEFAULT_QUERY + '_attachment', { 
     method: 'GET', 
     headers: { 
      'Accept': 'application/json', 
      'Content-Type': 'application/json', 
     }, 
     credentials: 'include', 
    }).then(response => response.json()); 

    var combinedData = {"apiRequest1":{},"apiRequest2":{}}; 
    Promise.all([apiRequest1, apiRequest2]).then(values => { 
     combinedData["apiRequest1"] = values[0]; 
     combinedData["apiRequest2"] = values[1]; 
     return combinedData; 
    }); 
} 

render() { 

    const { combinedData } = this.state; 

    let list = []; 
    for(var item of combinedData["apiRequest2"]) { 
     list.push(
      <Card data={item} key={list.length}/> 
     ); 
    } 

    return (
     <div className="container"> 
      <div className="row"> 
       {list} 
      </div> 
     </div> 
    ); 
}} 

을 나는 두 번째의 데이터 만 인출 카드 구성 요소를 공급하기 위해 시도한 첫 번째 시도로. 콘솔에 "Uncaught TypeError : '정의되지 않은'apiRequest2 '속성을 읽을 수 없습니다.

나는 모든 것을 조금씩 배우려고 노력하고 있지만 상황이 좀 더 혼란 스러울 수 있습니다. 내가 뭘 잘못하고 어떻게해야합니까? 내가 혼란 스러울 지 모르지만 사과한다.

편집 : 첫 번째 가져 오기에서 카드의 제목, 작성자 및 날짜를 ​​가져 오려고 시도하고 있으며 두 번째 가져 오기에서 카드의 미리보기 이미지를 가져 오려고합니다. 데이터 : [{제목 : "테스트"본체 "테스트"저자 "1"ID "1", ...}

제 페치는 다음과 같이 인 ...

및 제 페치 : 데이터 : [{이미지 URL "abc.png"ID "1", ...}, ...

Answer 1

문제는이 광고

const { combinedData } = this.state; 

에 이것과 같습니다.

var combinedData = this.state.combinedData; 

그리고 this.state.combinedData가 정의되지 않았 음을 확신합니다. 그래서이 예외는 당신이 첫 번째 실패하지 렌더링 수 있도록 생성자에서 this.state.combinedData의 기본 값을 추가해야합니다

Uncaught TypeError: Cannot read property 'apiRequest2' of undefined"

을 발생합니다. 그 후에 가져 오기 요청이 해결되면

this.setState({ 
    combinedData: ... // your data 
}) 

으로 somepoint로 전화해야합니다.