react.jsのAPIを使用してデータをレンダリングしますか？

Question

私はtitle, description, old priceとnew priceのレンダリングが必要なAPIを持っていますが、正しい方法を知りません。

ここで私は私が間違った方法でデータを取得していると思う私の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が電話しています。したがって、レンダリングで空の状態を処理する必要があります。

[EDIT]のコメントで述べたように

、次に、あなたがアクションを作成する必要があり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> 
     ) 
    } 

}