Question

我刚开始用Flux探索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;

Answer 1

这取决于您选择的通量框架。您可能需要使用setTimeout来触发某个框架中的其他操作，例如fluxxor（您将thumbnail_id componentWillReceiveProps或componentDidUpdate中的callback有些人也将redux传递给了行动。还有关于如何在DynmapWebChatEvent中链接动作的讨论，也许你可以从中获得一些想法。

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

ReactJS Flux在渲染

1 个答案: