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

Question

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

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

1. react-create-nested-components-with-loops

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

3. 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>

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

Answer 1

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

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

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

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