node.js - foreach 如何在 react-redux 中工作

Question

我正在制作一个可以从 KIWI api 获取航类的 nodejs 应用程序，它返回一个 json 列表，并且由于您的参数如 from 和 to，它应该返回一个航类列表。

我可以成功得到它，但是当我想显示所有内容时我不知道该怎么做。

这是我的渲染:

render(){
        return (
            <table className="table table-hover">
                <thead>
                    <tr>
                        <th>Flight #</th>
                        <th>From</th>
                        <th>To</th>
                    </tr>
                </thead>
                <tbody>
                    {this.props.flights.map(this.renderFlights)}
                </tbody>
            </table>
        );
    }

和

renderFlights(flightData){
        // add key to make them unique
        return(
            <tr>
                <td>{flightData.data[0].id}</td>
                <td>{flightData.data[0].mapIdfrom}</td>
                <td>{flightData.data[0].mapIdto}</td>
            </tr>
        );
    }

{this.props.flights.map(this.renderFlights)} 只是映射数组中的第一个，我知道我必须使用 foreach，但是我不知道如何使用它来打印列表中的所有内容，航类 ID 加上从和到，所以当你获取航类时，你得到大约 15，我希望能够显示所有 15 个航类，有人可以帮助我吗在这里？

这为 forEach 返回未定义:

 <tbody>
                        {
                            this.props.flights.array.forEach(element => {
                                this.renderFlights
                            })
                        }
                    </tbody>

Answer 1

我在这里找到了您的 API 和测试接口(interface):https://skypickerbookingapi1.docs.apiary.io/#reference/check-flights/checkflights/check_flights?console=1

看来您正在为您的响应获取此对象:

{
  "server_time": 1516568910,
  "flights_checked": false,
  "extra_fee": 0,
  // blah blah,

  "flights": [

    // first flight 

    {
      "bags_recheck_required": false,
      "dtime_unix": 1524646800,
      "extra": "",
      "atime_unix": 1524651600,
      "priority_boarding": {
        "currency": null,
        "price": null,
        "is_possible": false
      },
      "price": 313,
      "currency": "NOK",
      "price_new": 313,
      // blah blah
    },

    // second flight
   {
      "bags_recheck_required": true,
      "dtime_unix": 1524683400,
      "extra": "",
      "atime_unix": 1524691800,
      "priority_boarding": {
        "currency": null,
        "price": null,
        "is_possible": false
      },
      "price": 1560,
      "currency": "NOK",
      "price_new": 1560,
      // blah blah
   },
   // more and more flights

所以我猜你的“this.props.flights”指的是上述对象的“flights”属性。

现在，您需要使用“map”，而不是“foreach”:

this.props.flights.map(this.renderFlights) //this is correct

你的回调函数应该是:

renderFlights(one_single_flight){
        // add key to make them unique
        return(
            <tr>
                <td>{one_single_flight.id}</td>
                <td>{one_single_flight.src_country}</td>
                <td>{one_single_flight.dst_country}</td>
            </tr>
        );
    }
}