我目前正在嘗試將陣列從對角線傳遞到資料表。
但在這里我使用硬編碼值傳遞資料。
import { useState } from "react";
//const rawData= [[7,0,0,1,6,1],[8,2,5,1,7],[5,4,1,4],[2,2,0]]
export default function DataTable1(){
//const [tableData, setTableData] = useState(rawData)
return(
<table>
<thead>
<tr>
<th></th>
<th>Week 1</th>
<th>Week 2</th>
<th>Week 3</th>
<th>Week 4</th>
<th>Net Lost</th>
<th>Net Recovered</th>
</tr>
</thead>
<tbody>
<tr>
<th>Week 1</th>
<td>7</td>
<td>0</td>
<td>0</td>
<td>1</td>
<td>6</td>
<td>1</td>
</tr>
<tr>
<th>Week 2</th>
<td></td>
<td>8</td>
<td>2</td>
<td>5</td>
<td>1</td>
<td>7</td>
</tr>
<tr>
<th>Week 3</th>
<td></td>
<td></td>
<td>5</td>
<td>4</td>
<td>1</td>
<td>4</td>
</tr>
<tr>
<th>Week 4</th>
<td></td>
<td></td>
<td></td>
<td>2</td>
<td>2</td>
<td>0</td>
</tr>
</tbody>
</table>
)
}
但我需要使用rawData陣列來填充表格，而不是硬編碼值。有什么方法可以從對角線上填充 rawData 陣列的值？
有人可以給我使用陣列獲得所需輸出的路徑和建??議嗎？
我嘗試了什么：
<td>rawData[0][0]</td>
我嘗試使用上述方式填充。但它沒有用，并且覺得它不是正確的方法
uj5u.com熱心網友回復：
嘗試這個
import { useState } from "react";
export default function DataTable1(){
const rawData= [[7,0,0,1,6,1],[8,2,5,1,7],[5,4,1,4],[2,2,0]]
return (
<table>
<thead>
<tr>
<th></th>
<th>Week 1</th>
<th>Week 2</th>
<th>Week 3</th>
<th>Week 4</th>
<th>Net Lost</th>
<th>Net Recovered</th>
</tr>
</thead>
<tbody>
{rawData.map((item, index) => {
return (
<tr>
<th>Week {index 1}</th>
{[...Array(6 - item.length)].map((item) => {
return <td></td>; //for empty values
})}
{item.map((itm) => {
return <td>{itm}</td>;
})}
</tr>
);
})}
</tbody>
</table>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/508506.html