如何在 React Js 中使用 map 实现嵌套循环

Posted 2023-02-21

【中文标题】如何在 React Js 中使用 map 实现嵌套循环

【英文标题】：How to implement nested loop using map in react Js

【发布时间】：2020-03-25 19:06:13

【问题描述】：

我知道有很多线程已经回答了这个在 react js 中使用 map 的嵌套循环问题，但是我很困惑如何在我的代码中实现它。试了几次都报错，

这是我尝试过的一些主题，但我似乎无法实现它：

react-create-nested-components-with-loops

how-to-have-nested-loops-with-map-in-jsx

react-map-over-nested-array-of-objects

这是我想要得到的 Json：

"costs": [
          
            "service": "CTC",
            "description": "JNE City Courier",
            "cost": [
              
                "value": 234000,
                "etd": "1-2",
                "note": ""
              
            ]
          ,
          
            "service": "CTCYES",
            "description": "JNE City Courier",
            "cost": [
              
                "value": 468000,
                "etd": "1-1",
                "note": ""
              
            ]
          
        ]

我想要的是从这个 JSON 示例中获取值，但仍然没有运气

这是我要循环的组件：

<MDBDropdown className="select-type">
 <MDBDropdownToggle caret className="select-btn">
  Choose Your Courier Service
 </MDBDropdownToggle>
 <MDBDropdownMenu basic onClick=this.serviceData>
  shipmentFees != null ? shipmentFees.map(
    shipmentFee => (
     <MDBDropdownItem key=shipmentFee.cost.service name=shipmentFee.cost.description + "," + shipmentFee.cost.etd value=shipmentFee.cost.value>
      shipmentFee.cost.description, shipmentFee.cost.etd Days
     </MDBDropdownItem>
    )
   )
  :
    <MDBDropdownItem value="-">There is no service</MDBDropdownItem>
  
 </MDBDropdownMenu>
</MDBDropdown>

从参考编号 3 开始，我尝试了这个解决方案，但我得到了 unexpected token, expected ","

<MDBDropdown className="select-type">
 <MDBDropdownToggle caret className="select-btn">
  Choose Your Courier Service
 </MDBDropdownToggle>
 <MDBDropdownMenu basic onClick=this.serviceData>
  shipmentFees != null ? shipmentFees.map(
   shipmentFee => (
    
     shipmentFee.cost.map(
      cost => (
       <MDBDropdownItem key=cost.service name=cost.description + "," + cost.etd value=cost.value>
        cost.description, cost.etd Days
       </MDBDropdownItem>
      )
     )
    )
   )
   :
   <MDBDropdownItem value="-">There is no service</MDBDropdownItem>
  
 </MDBDropdownMenu>
</MDBDropdown>

有人可以帮我解决这个问题吗？

【问题讨论】：

去掉shipmentFee.cost.map(....)周围的括号

@RamKrish2079 感谢您的回复，当我按照您的说法删除括号时，unexpected token, expected "," 错误消失了，但我仍然无法从 JSON 中获取 cost.value，仅供参考，它出现在console.log

考虑到 shipmentFees 是您提供的 JSON，它应该可以工作

【参考方案1】：

我只是按照你的第二个代码块

1) 我认为你的shipmentFee.cost.map( 应该是shipmentFee.costs.map(

2) 下一行 cost => ( 此处 cost 将为您提供 service、description 和 @ 987654327@

3) cost[] 因为它是一个数组，您必须执行另一个映射/循环才能提取 value、etd 和 note。这个value是我认为的你的期望值

【讨论】：

在我尝试这个之后它可以工作，我必须稍微调整一下我的代码但是当我慢慢地按照你的步骤进行一些尝试和错误时它可以工作谢谢你

很高兴我的解决方案能帮到您

但我想问一件事，你知道如何从嵌套循环中获取event.target.value吗？

event.target.value 不是嵌套循环的一部分。假设您有一个按钮<input type="text" onChange=this.handleChange/> 和处理程序方法handleChange=(event)=>...，一旦您尝试更改该文本框，它将触发并且您将获得 event.target.value