foreach 如何在 react-redux 中工作

Posted 2023-03-07

【中文标题】foreach 如何在 react-redux 中工作

【英文标题】：how does foreach works in react-redux

【发布时间】：2018-06-30 11:24:35

【问题描述】：

我正在制作一个 nodejs 应用程序，它可以从 KIWI api 获取航班，它返回一个 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 加上 from 和 to，因此，当您获取大约 15 个航班时，我希望能够显示所有 15 个航班，有人可以帮我吗？

这将返回未定义的 forEach：

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

【问题讨论】：

你为什么要做 flightData.data[0].id ？你能发布你的 this.props.flights 的结构吗？

@user222957 你想要我的 flightReducer 吗？

你肯定要使用map，不要使用foreach，因为它不会返回任何东西

我的意思是你能 console.log 你的 this.props.flights

@user222957 它返回 json 文件，它有很多信息，但我需要包含所有航班的数据部分。

【参考方案1】：

我在这里找到了你的 API 和测试接口：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>
        );
    

【讨论】：

我认为这是正确的答案。你不应该使用 forEach 因为它不返回任何东西，而 map 会。

谢谢大家，这是正确的，但我希望该列表中的每一个航班都不仅仅是一个。

我知道。 “renderFlights”回调将由“map”函数多次运行，并且 one_single_flight 将成为它当前循环的任何航班。但是，如果您的代码有效，那么这就是最重要的 :) 祝您好运并感谢您的支持

【参考方案2】：

这就是我能够得到我想要的结果的方式：

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 打印特定日期的所有可用航班。