如何映射map的回调？答案

【问题标题】：How to map a callback of map?如何映射map的回调？
【发布时间】：2019-06-17 17:26:25
【问题描述】：

我正在尝试渲染一个项目和您各自的子项目，这是我的列表：

  const labelList = [
    {
      id: 1,
      tipo: 'Type 1',
      itens:
      [{
        id: 1,
        nameItem: 'Item 1'
      },
      {
        id: 2,
        nameItem: 'item 2',
      },
      {
        id: 3,
        nameItem: 'item 3',
      }],
    },
    {
      id: 2,
      tipo: 'Type 2',
      itens:
      [{
        id: 1,
        nameItem: 'Item 1'
      },
      {
        id: 2,
        nameItem: 'item 2',
      },
      {
        id: 3,
        nameItem: 'item 3',
      }],
    },
    {
      id: 3,
      tipo: 'Type 3',
      itens:
      [{
        id: 1,
        nameItem: 'Item 1'
      },
      {
        id: 2,
        nameItem: 'item 2',
      },
      {
        id: 3,
        nameItem: 'item 3',
      }],
    },
    {
      id: 4,
      tipo: 'Type 4',
      itens:
      [{
        id: 1,
        nameItem: 'Item 1'
      },
      {
        id: 2,
        nameItem: 'item 2',
      },
      {
        id: 3,
        nameItem: 'item 3',
      }],
    },
  ];

所以，我试图像这样显示这些数据：

类型 1
项目 1、项目 2、项目 3

类型 2
项目 1、项目 2、项目 3

类型 3
项目 1、项目 2、项目 3

类型 4
第 1 项、第 2 项、第 3 项

这是我的代码：

{labelList.map(element => {
  return(            
      <p>{element.tipo}</p>

      {element.map(item => {
        return(
          <CheckboxField
            key={item.id}
            label={item.nameItem}                
          />
        )
      })}
  )})}

我正在使用 React，但这是一个 Javascript 问题！

我正在尝试使用labelList.map() 的回调element 运行地图（以渲染itens）。我的代码不起作用，但我相信它的逻辑是这样的。

有人可以帮助我吗？

【问题讨论】：

应该是elements.itens.map 而不是elements.map

标签： javascript reactjs ecmascript-6

【解决方案1】：

您应该映射itens 键而不是仅映射元素。

{labelList.map(element => {
  return(            
      <p>{element.tipo}</p>

      {element.itens.map(item => {
        return(
          <CheckboxField
            key={item.id}
            label={item.nameItem}                
          />
        )
      })}
  )})}

【讨论】：

【解决方案2】：

小心，你可以迭代 element.itens 而不是 element，所以这些是正确的代码：

{labelList.map(element => {
return(            
  <p>{element.tipo}</p>

  {element.itens.map(item => {
    return(
      <CheckboxField
        key={item.id}
        label={item.nameItem}                
      />
    )
  })}
)})}

【讨论】：