為什么我不能在 React JS 中映射這個物件陣列？
這是我的代碼：
const columns = [
{ field: 'id', headerName: 'ID', width: 200 },
{ field: 'season', headerName: 'Season', width: 200 },
{ field: 'transferWindow', headerName: 'Transfer Window', width: 200 }
]
<table>
<thead>
<tr>
{columns.map((item) => {
<th key={item.field}>{item.field}</th>
})}
{/* <th>{columns[0].field}</th>
<th>{columns[1].field}</th>
<th>{columns[2].field}</th> */}
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
引號中的代碼有效，但地圖無效。
uj5u.com熱心網友回復：
您在地圖上缺少 return 陳述句，因此您無法獲得輸出。
您可以按如下方式進行。
export default function App() {
const columns = [
{ field: "id", headerName: "ID", width: 200 },
{ field: "season", headerName: "Season", width: 200 },
{ field: "transferWindow", headerName: "Transfer Window", width: 200 }
];
return (
<div className="App">
<table>
<thead>
<tr>
{columns.map((item) => (
<th key={item.field}>{item.field}</th>
))}
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/418425.html
標籤：
下一篇：在網頁上顯示NodeJS查詢結果