如何在React中的相同<li>标记中呈现对象数组？

Question

我有一些嵌套数组。像这样：[Array（2），Array（2），...] example

每个子数组包含两个带有“文本”道具的对象。

obj = {key: something, text: something}

现在我想将每个子阵列的对象道具渲染成一个＆lt; li>标签就像这样：

1. Array <li key={}>{obj.text - obj.text}</li>
2. Array <li key={}>{obj.text - obj.text}</li>

等等。

我试过这个，但它只是将每个obj.text渲染到不同的行。

array.map(nested => nested.map(item => <li key={item.key}>{item.text}</li>) 

我该怎么做？感谢。

Answer 1

使用Array.map()迭代数组，但不是迭代子数组，而是手动提取这两个项目，并在列表项目中进行渲染。您可以使用destructuring assignment或括号表示法。

注意：由于这两个项目都有密钥，因此我将两者结合起来创建了列表项的密钥。您也可以只使用第1或第2项。

array.map(([a, b]) => <li key={`${a.key}-${b.key}`}>{a.text} - {b.text}</li>)