ReactJS通量多重請求，以便在渲染時對其他API執行

我剛開始使用Flux來探索ReactJS。我一直在管理初始化API服務以獲取初始數據，但在流程中，我在呈現組件時遇到了一些問題。ReactJS通量多重請求，以便在渲染時對其他API執行

最初的json包含一個thumbnail_id，通過這個ID我應該ping另一個端點來獲取縮略圖信息。

如何繼續在組件渲染上調用另一個restAPI端點？

所以我的代碼看起來它遵循

import React from 'react'; 
import EstateStore from '../stores/EstateStore'; 
import EstateActions from '../actions/EstateActions'; 

export default class Estates extends React.Component{ 

constructor(){ 
    super(); 
    this.state = { 
     estates: [] 
    } 

    this._onChange = this._onChange.bind(this); 
    this.handleChange = this.handleChange.bind(this); 

    } 

    componentWillMount(){ 
    console.log('estatesComponent will mount'); 
    EstateStore .addChangeListener(this._onChange); 
    } 

    componentWillUnmount() { 
    EstateStore.removeChangeListener(this._onChange); 
    } 

    componentDidMount() { 
    console.log('estatesComponent mounted'); 
    EstateActions.getEstates(); 
    } 

    handleChange(e) { 

    } 

    _onChange() { 
    this.setState({ 
     estates: EstateStore.getEstates() 
    }); 
    } 

    render() { 
    var estates; 
    if (this.state.estates) { 

     estates = this.state.estates.map(function (estate) { 

     return (
     <li className="item"> 
     <div className="row"> 
     <div className="immos-container"> 
      <div className="col-lg-3 col-md-3"> 
      // here I should call another endpoint on estate.thumbnail_id 
      <img className="img-responsive" src={estate.thumbnail_id} /> 
      </div> 
      <div className="col-lg-9 col-md-9"> 
      <h3> dangerouslySetInnerHTML={{__html: estate.title}} </h3> 
      <span className="address">dangerouslySetInnerHTML={{__html:estate.address}} <i className="fa fa-pin"></i></span> 
       <div className="col-xs-7" dangerouslySetInnerHTML={{__html: estate.content}} /> 
       <div className="col-xs-5"> 
      <ul className="immo-detail"> 
       <li><span>Etage:</span> {estate.etage}</li> 
       <li><span>Einheiten:</span> {estate.etage}</li> 
       <li><span>Fläche:</span>{estate.area}</li> 
       <li><span>Kaufpreis:</span>{estate.price}</li> 
      </ul> 
      </div> 
      </div> 
     </div> 
     </div> 
     </li>) 

     }); 
    } 

    return ( 
     <div> 
      <div className="container-fluid"> 
       <div className="immo-list"> 
       <ul className="immos"> 
        {estates} 
       </ul> 
       </div> 
      </div> 
     </div> 
    ); 
    } 
} 

//export default Estates;

來源

2015-09-20 fefe

如果它是一個簡單的木屐則getB剛剛鏈中的動作。看看http://stackoverflow.com/questions/32537568/flux-waitfor-specific-event/32542242#32542242。 –

這要看你選擇什麼樣的通量框架。您可能需要使用setTimeout觸發某個框架中的另一個操作，例如fluxxor（您會在componentWillReceiveProps或componentDidUpdate中得到您的thumbnail_id）。有些人還通過callback進入操作。還有關於如何在redux中鏈接操作的討論，也許你可以從中得到一些想法。

https://github.com/rackt/redux/issues/468

來源

2015-09-22 01:30:03 ycavatars

ReactJS通量多重請求，以便在渲染時對其他API執行

回答

相關問題