如何獲得承諾價值以反應組件？

Question

我想從api端點獲取數據並將其顯示在反應組件上。

當我根據來自state.trainData的數據通過映射制定組件時，我還需要從另一個api端點獲取數據，用於state.trainData的每個元素。

我正在使用幫助函數來獲取我的數據，但那是我遇到了障礙。我確實得到的數據很好，但問題是我不能把它放在一個變量左右，以將它放在一個組件。

在調用getSpecificTrainDetails之後的渲染函數中，我得到了關於response.data的數據。我一直在嘗試兩個小時來弄清楚如何獲取數據並將其放置在所需的組件中，但我無處可去！非常感謝幫助。

componentDidMount =() => { 
    axios.get('https://rata.digitraffic.fi/api/v1/live-trains?station=SLO') 
     .then((response) => { 
     //console.log(response.data); 
     this.setState({ 
      trainData: response.data, 
     }); 
     }).catch((error) => { 
     console.log(error); 
     }); 
    } 

    getSpecificTrainDetails = (trainNum, date) => { 
      let apiLink = "https://rata.digitraffic.fi/api/v1/compositions/"; 
      let apiConstructedLink = apiLink + trainNum + "?departure_date=" + date; 
      return axios.get(apiConstructedLink) 
      .then((response) => { 
       return response; 
      }).catch((error) => { 
       console.log(error); 
      }); 
      }  

    render(){ 
     let content = this.state.trainData.map((item, i) => { 
      this.getSpecificTrainDetails(item.trainNumber, item.departureDate).then((response) => { 
          console.log(response.data); 
          }); 

          return <Popup key={i} 
           <Card> //VALUE FROM 1ST API GOES HERE!!! </Card> 
           // VALUE FROM 2ND API GOES HERE!! 
           </Popup>; 
         }); 
    } 

例如從第一API我得到的列車號和日期，並在此日期和號碼一起第二API通過我得到的列車信息。

Answer 1

你永遠不應該在render函數中調用異步。

你應該做的，而不是是調用getSpecificTrainDetails的componentDidMount方法裏面：

componentDidMount =() => { 
 
    axios.get('https://rata.digitraffic.fi/api/v1/live-trains?station=SLO') 
 
    .then((response) => { 
 
     const trainData = response.data; 
 

 
     // For each train data, fetch it's specific details 
 
     const promises = trainData.map((item, i) => { 
 
      return this.getSpecificTrainDetails(
 
       item.trainNumber, 
 
       item.departureDate 
 
      ).then((trainResponse) => { 
 
       // Create a new object with both 
 
       // item's regular data and it's specific data 
 
       return { 
 
        idx: i, 
 
        item, 
 
        specificDetails: trainResponse.data 
 
       }; 
 
      }); 
 
     }); 
 

 
     // Await on all promises 
 
     return Promise.all(promises); 
 
    }).then((trainsData) => { 
 
     // When all results have arrived, put them into the component's state 
 
     this.setState({ 
 
      trainData: trainsData 
 
     }); 
 
    }).catch((error) => { 
 
     console.log(error); 
 
    }); 
 
} 
 

 
getSpecificTrainDetails = (trainNum, date) => { 
 
    let apiLink = "https://rata.digitraffic.fi/api/v1/compositions/"; 
 
    let apiConstructedLink = apiLink + trainNum + "?departure_date=" + date; 
 

 
    return axios.get(apiConstructedLink) 
 
     .then((response) => { 
 
      return response; 
 
     }).catch((error) => { 
 
      console.log(error); 
 
     }); 
 
} 
 

 
render() { 
 
    if (!this.state.trainData) { 
 
     return; 
 
    } 
 

 
    // This will render once all the specific results have been fetched 
 
    return this.state.trainData.map((item, i) => { 
 
     return (
 
      <Popup key={i}> 
 
       <Card> 
 
        1st API call data: 
 
        { item.item.something } 
 
       </Card> 
 
       2nd API call data: 
 
       { item.specificDetails.something } 
 
      </Popup> 
 
     ); 
 
    }); 
 
}