ReactJS，多次獲取並呈現數據

我對React非常新，我一直在爲第一個React項目掙扎了好幾天。ReactJS，多次獲取並呈現數據

我基本上有一張卡片清單，分爲兩個部分：CardsList和Card。我想要做的是獲取每張卡的數據。我的問題是，我幾乎不知道如何爲單個端點獲取作品，並試圖同時從多個端點獲取數據似乎打敗了我。

我嘗試以下從博客說明取的例子，以及與此想出：

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」，...}，...

和第二取：數據：[{IMAGE_URL：「abc.png」，ID：「1」，...}，...

來源

2017-09-22 JaneEyre

您是否在第一次請求中獲得卡片列表，然後獲取第二張卡片上的詳細信息？你能告訴我們更多關於你想要獲取什麼的信息以及可能的答案的例子嗎？ – bennygenel

編輯該帖子。 – JaneEyre

的問題是在這條線

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

您的提取請求可以解決某些問題。

來源

2017-09-22 18:02:53

好吧，我已經將this.state.combinedData的默認狀態設置爲構造函數中的空數組。但是，我有點不確定應該在哪裏設置combinedData的新狀態。我在Promise.all後立即在componentDidMount（）中添加了this.setState（{combinedData：combinedData}），但是我得到了「Uncaught TypeError：無法讀取未定義的屬性'Symbol（Symbol.iterator）'。我是否應該先刪除提到的那條線？ – JaneEyre

@JaneEyre：我認爲你應該用'this.setState ...'替換'return combinedData;'這裏的想法是在完成獲取數據之後更新狀態。狀態由this.setState更新後，react會自動調用render（）方法。 –

@ĐịnhTrần：我想用this.setState替換返回的combinedData，但是出於某種原因，我得到了相同的錯誤。兩次我做了更改，錯誤本身指向for循環中combinedData的使用行。這個問題可能是別的嗎？ – JaneEyre

ReactJS，多次獲取並呈現數據

回答

相關問題