Question

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

  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问题！

我正在尝试使用itens的回调element运行地图（以渲染labelList.map()）。我的代码行不通，但是我认为逻辑看起来像这样。

有人可以帮助我吗？

Answer 1

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

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

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

Answer 2

请注意，您可以在element.itens而不是element上进行迭代，因此这是正确的代码：

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

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

如何映射map的回调？

2 个答案: