React:表td正在水平填充

Question

我用react表处理这个json数据，它在单个<td></td>中水平显示，非常感谢您的输入。

export const COLUMNS = [
{
Header: 'mId',
accessor: (row) => {return row.skus.map(sku => sku.mId); }
}]

请注意，我可以访问数据并打印，但它看起来很奇怪。

预期输出：

<td>sku262022</td>

<td>sku262020</td>

<td>sku2680407</td>

<td>sku2680408</td>

<td>sku10980349</td>

<td>sku2680406</td>

实际输出：<td>sku26200222sku2620220sku2680407sku2680805sku10980349sku2680046</td>

基本上我希望它显示在每一行。非常感谢

Answer 1

映射通过的每个项目都需要在自己的行中。然后，您可以根据需要添加任意数量的下拉列表。这样，每次通过它进行映射时，它都会呈现一个新的表行。这是一张非常简单的表格，你可以按照它来操作。

export default function App() {
let data = [
{sku: "sku2620222"},
{sku: "sku2620220"},
{sku: "sku2680407"},
{sku: "sku2620222"},
{sku: "sku2680408"},
]
let tabledata = data.map(i => {
return (
<tr>
<td>
{i.sku}
</td>
</tr>
)
})
return (
<>
<table>
<thead>
<tr>
<th>
SKU
</th>
</tr>
</thead>
<tbody>
{tabledata}
</tbody>
</table>
</>
)
}