React中如何在同一个<li>标签内渲染嵌套数组的对象文本？

你遇到的问题核心是用了两层map遍历：外层遍历子数组，内层又遍历子数组里的每个对象，导致每个text都生成了单独的<li>。其实我们只需要一层map，直接对应每个子数组生成一个<li>就好。

正确的实现方式 #

假设你的数据源是这样的：

const data = [
  [{ key: 'k1', text: '文本1' }, { key: 'k2', text: '文本2' }],
  [{ key: 'k3', text: '文本3' }, { key: 'k4', text: '文本4' }],
  // ...更多子数组
];

你可以通过解构赋值直接取出每个子数组里的两个对象，然后把它们的text拼接后放入同一个<li>：

<ul>
  {data.map(([firstItem, secondItem], index) => (
    <li 
      key={`${firstItem.key}-${secondItem.key}`} // 优先用唯一标识当key，比index更稳定
    >
      {`${firstItem.text} - ${secondItem.text}`}
    </li>
  ))}
</ul>

关键说明 #

• 只需要一层map：外层map的每一次迭代对应一个子数组，也就是你要的一个<li>标签。
• 解构赋值简化代码：[firstItem, secondItem]直接提取子数组的两个元素，比用nested[0]、nested[1]更直观。
• 关于key：尽量不要用index作为key（除非数组是静态且不会重新排序），这里用两个对象的key拼接成唯一标识，是更稳妥的做法。

如果你的子数组长度可能变化（不是固定2个），还可以用join来灵活处理：

<li key={...}>
  {nested.map(item => item.text).join(' - ')}
</li>

这样不管子数组里有几个对象，都能把它们的text用-连接起来。

内容的提问来源于stack exchange，提问作者bmz1