如何在 React 中的同一个 <li> 标签中呈现对象数组？

Question

我得到了一些嵌套数组。像这样：[Array(2), Array(2), ...] example

每个子数组包含两个带有 "text" 属性的对象。

obj = {key: something, text: something}

现在我想将每个子数组的对象属性渲染到一个

标签中，就像这样：

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 或括号表示法。

注意： 因为两个项目都有键，所以我将两者结合起来创建列表项的键。您也可以只使用第一项或第二项。

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