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

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

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

这是我想要得到的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>

---

有人能帮我解决这个问题吗

我只是跟着你的第二段代码走

1） 我认为您的

shipmentFee.cost.map（

应该是

shipmentFee.costs.map（

2） 下一行

cost=>（

此处

cost

将为您提供

服务

，

说明

和

成本[]

---

3）

成本[]

由于它是一个数组，您必须执行另一个映射/循环来提取

值

，

etd

和

注意

值

我认为这是您的期望值

删除

shipmentFee.cost.map（..）周围的括号

@RamKrish2079感谢您的回复，当我像您所说的那样删除括号时，

意外标记，预期“，”

错误消失了，但我仍然无法从JSON中获取

成本.价值

，仅供参考，它出现在

控制台中。日志

考虑到

运费

是您提供的JSON，它应该可以工作在我尝试此方法后，我必须稍微检查一下我的代码，但当我缓慢地按照您的步骤进行一些尝试时，它可以工作d错误感谢您很高兴我的解决方案对您有所帮助，但我想问一件事，您知道如何从嵌套循环中获取

event.target.value

？event.target.value不是嵌套循环的一部分。假设您有一个按钮

和处理程序方法

handleChange=（event）=>{…}

，一旦您尝试更改该文本框，它将触发，您将获得event.target.value

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