foreach在堆-redux中如何工作

I am making a nodejs app which can fetch flights from the KIWI api, it returns a json list, and since you parameters like from and to, it should return a list of flights.

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

I can successfully get that, but when I want to display everything I dont know how to do it.

我可以成功地做到这一点，但当我想要展示所有的东西时，我不知道如何去做。

This is my render:

这是我的呈现:

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>
        );
    }

and

和

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)} just maps the first one in the array, I know that I have to use foreach, but I dont know how I can use this to print everything in the list, flight id plus the from and to, so when u fetch the flights u get around 15, and I want to be able to display all the 15 flights can someone help me out here?

{ this.props.flights.map(this.renderFlights)}地图数组中的第一个,我知道我必须使用foreach,但是我不知道我可以用这个打印在列表中,飞行id加和,所以当u获取航班大约15,我希望能够显示所有的15个航班有人能帮帮我吗?

this returns undefined for forEach:

这将返回未定义的每个:

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

2 个解决方案

#1

I found your API and test interface here: https://skypickerbookingapi1.docs.apiary.io/#reference/check-flights/checkflights/check_flights?console=1

我在这里找到了您的API和测试接口:https://skypickerbookingapi1.docs.apiary.io/#reference/ checkflights/check_flights?控制台=1。

So it seems that you are getting this object for your response:

所以你似乎得到了这个对象作为你的回应:

{
  "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

So I'm guessing that your "this.props.flights" is referring to the "flights" property of the above object.

所以我猜这就是你的“道具”。“飞行”指的是上述物体的“飞行”属性。

Now, you need to use "map", not "foreach":

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

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

And your callback function should be:

你的回调函数应该是:

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>
        );
    }
}

#2

THIS IS HOW I WAS ABLE TO GET THE RESULT I WANTED:

这就是我如何得到我想要的结果:

renderFlights(flightData){
        const result = flightData._results;       
        var rows = [];
        for (var i = 0; i < result; i++) {
            rows.push(
            <tr key={i} >
                <td>{flightData.data[i].mapIdfrom}</td>,
                <td>{flightData.data[i].mapIdto}</td>,
            </tr>
            );
        }
        return <tbody>{rows}</tbody>;
    }

THS PRINTS ALL THE AVAILABLE FLIGHTS FOR SOME CERTAIN DATE.

所有可用的航班都会在特定日期打印出来。

#1