ReactJS Flux 多个请求以在渲染上休息 API答案

【问题标题】：ReactJS Flux multiple requests to restAPI on renderReactJS Flux 多个请求以在渲染上休息 API
【发布时间】：2024-01-24 06:41:01
【问题描述】：

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

【问题讨论】：

如果它是一个简单的 getA 那么 getB 只是链接动作。看*.com/questions/32537568/…。

标签： api request reactjs flux

【解决方案1】：

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

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

【讨论】：