ReactJS、複数のフェッチとデータのレンダリング

Question

私はReactにはかなり新しく、私は最初のReactプロジェクトでかなりの数日間データを取得することに苦労してきました。

私は基本的に、CardsListとCardの2つのコンポーネントに分割されたカードのリストを持っています。私がしようとしているのは、各カードのデータを取得することです。私の問題は、単一のエンドポイントでフェッチがどのように機能するかをほとんど理解しておらず、同時に複数のエンドポイントからデータをフェッチしようとすると、私に勝つようです。

私はフェッチ説明するブログから例を以下試みたが、これを思い付いた：私は2番目からのデータのみをフェッチカード・コンポーネントを供給しようとした最初の試みとして

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'を読み取れません。

私はどこからでも少しでも勉強しようとしていますが、おそらくもっと混乱させています。私は間違って何をしているのですか？これについてどうすればいいですか？私も混乱しているように見えるかもしれないと謝罪します。

EDIT：最初のフェッチでは、カードのタイトル、著者、日付を取得しようとしています.2回目のフェッチでは、カードのプレビュー画像を取得しようとしています。

フェッチ最初はこのようなものである： データ：[{タイトル： "テスト"、身体： "テスト"、著者： "1"、ID： "1"、...}、...

及び第二フェッチ： データ：[{IMAGE_URL： "abc.png"、ID： "1"、...}、...

Answer 1

問題は、このライン

const { combinedData } = this.state; 

でありますこれはこれと同じです

var combinedData = this.state.combinedData; 

とthis.state.combinedDataは未定義です。したがって、この例外は

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

を投げているあなたは、レンダリング最初は失敗しないように、コンストラクタでthis.state.combinedDataのデフォルト値を追加する必要があります。その後、

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

と呼び出す必要があります。フェッチ要求が解決した時点で