javascript - 如何在react Js中使用map实现嵌套循环

Question

我知道有很多线程已经回答了有关在 React js 中使用映射的嵌套循环问题，但我很困惑如何在代码中实现它。我尝试了几次，但出现错误，

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

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开始，我尝试了这个解决方案，但我得到了意外的 token ，预期为“，”

<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、描述和成本[]

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