在react.js中使用API​​呈現數據？

Question

我有一個API，其中title, description, old price和new price應呈現，但我不知道如何正確的方式。

與我的API

export class Content extends React.Component{ 
    constructor(){ 
     super(); 
     this.state={}; 
    } 
    componentWillMount(){ 
     var url="95.85.23.63:8000/frontend/web/api/v1/user/get-popular"; 
     Request.get(url).then((reponse)=>{ 
      this.setState({ 
       infos:response.body.Search, 
       total:response.body.totalResults 
      }); 
     }); 
    } 

    render(){ 
     var infos=_.map(this.state.infos, (info)=>{ 
      return <li>{info.title}</li>; 
     }); 

     return(
     <div> 
     <ul> {infos}</ul> 

     </div> 
     ) 
    } 

} 

下面內容組成部分我覺得我在一個錯誤的方式檢索數據。你可以幫我嗎？

Answer 1

你正在和async打電話。所以，你需要處理渲染中的空狀態。請看下面的代碼

[編輯]

正如在評論中提到，建議向請求componentDidMount()

export class Content extends React.Component{ 
    constructor(){ 
     super(); 
     this.state={ 
      infos: [], 
      total: 0, 
     }; 
    } 
    componentDidMount(){ 
     var url="95.85.23.63:8000/frontend/web/api/v1/user/get-popular"; 
     Request.get(url).then((reponse)=>{ 
      this.setState({ 
       infos:response.body.Search, 
       total:response.body.totalResults 
      }); 
     }); 
    } 

    render(){ 
     if(this.state.infos.length === 0) 
      return false //return false when nothing is in the state 
     var infos=_.map(this.state.infos, (info)=>{ 
      return <li>{info.title}</li>; 
     }); 

     return(
     <div> 
     <ul> {infos}</ul> 

     </div> 
     ) 
    } 

}