Javascript 在ReactJS中，当迭代非浅层数据结构时，如何最好地组织代码

我正在使用React，我有以下数据结构：

[
  {
    key: 'test'
    data: [
      {
        id: 1,
        name: 'test name',
        desc: 'aaaaaaaaa'
      },
      {
       id: 2,
       name: 'test name2',
       desc: 'aaaaaaaaa'
      },
      {
        id: 3,
        name: 'test name3',
        desc: 'aaaaaaaaa'
      }
    ]
  },
  {
    key: 'test2'
    data: [
      {
        id: 5,
        name: 'test name5',
        desc: 'aaaaaaaaa'
      },
      {
       id: 5,
       name: 'test name2',
       desc: 'aaaaaaaaa'
      },
      {
        id: 6,
        name: 'test name6',
        desc: 'aaaaaaaaa'
      }
    ]
  }
]

我正在寻找一种从这种结构中获取数据的更好方法。问题是，应该是一个

ul

列表，其中包含

li

项

我有这样一个结构：

<div className='wrapper'}>
  {tabInfo.map(({key, data}) => {
    return (
    <div className='tab-list' key={key}>                  
      <h4>{key}</h4>                  
      <ul>
        {data.map(({id, name, desc}) => {
          return (
            <li key={id}>
              <span className='name'>
                {name}
              </span>
              <span className="desc">{desc}</span>
            </li>
          )
        })}
      </ul>
    </div>
    )
  })}
</div>

{tabInfo.map（{key，data}）=>{
返回(
{key}

{data.map（{id，name，desc}）=>{
返回(

{name}
{desc}

)
})}

)
})}

---

在这种情况下，获取数据的更好方法是什么？我认为

map

内部

map

不是个好主意

我相信这会成功的，尽管我还没有测试过。您可以将其移动到单独的组件，然后将其用作地图的一部分：

const ListItem = ({ id, name, desc }) => (
    <li key={id}>
        <span className='name'>
            {name}
        </span>
        <span className="desc">
            {desc}
        </span>
    </li>
);

<div className='wrapper'}>
    {tabInfo.map(({key, data}) => {
        return (
            <div className='tab-list' key={key}>
                <h4>{key}</h4>
                <ul>
                {data.map(dataItem => <ListItem {...dataItem} />)}
                </ul>
            </div>
        )
    })}
</div>

const ListItem=（{id，name，desc}）=>(

{name}
{desc}

);
{tabInfo.map（{key，data}）=>{
返回(
{key}

{data.map（dataItem=>）}

)
})}

---

我可能错过了一些东西，所以如果有任何问题，我很高兴知道，这样我就可以解决这个问题了

问题是什么？你在找代码审查吗？这行吗

在这种情况下，获取数据的更好方法是什么

从何处获取数据？您可以将处理

data.map的函数分离开来。你们甚至可以把它做成一个单独的组件。“我认为地图里面的地图不是个好主意。”为什么不呢？这正是您正在做的，将
数据
中的条目映射到
li
元素。是的，我想让代码变得更好。我觉得这完全没问题。你甚至可以像@OliverRadini提到的那样做。