我是反應(yīng)新手。如何使用“map”函數(shù)在兩列中列出兩個(gè)不同數(shù)組的元素？state = { dates: ["2000", "2001", "2002"], cases: ["1", "2", "3"]}render() { return ( <thead> <tr> <th>Date</th> <th>Cases</th> </tr> </thead> <tbody> {this.state.dates.map(el => <tr> <td>{el}</td> </tr> )} // I want to list elements from "cases" array like this but in the second column </tbody> )}
2 回答
米脂
TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超3個(gè)贊
快速簡(jiǎn)單的解決方案： 不推薦
如果你總是假設(shè)dates和cases總是相同的長(zhǎng)度，那么你可以這樣做：
{this.state.dates.map((el, index) => (
<tr>
<td>{this.state.dates[index]}</td>
<td>{this.state.cases[index]}</td>
</tr>
))}
該方法利用了函數(shù)index的參數(shù)map。然后您可以訪問(wèn)指定索引處的數(shù)組。
推薦解決方案：
通常的做法是按記錄對(duì)數(shù)據(jù)進(jìn)行分組。
使用您的示例，使用如下結(jié)構(gòu)：
state = {
records: [
{ date: '2000', caseId: '1' },
{ date: '2001', caseId: '2' },
{ date: '2002', caseId: '3' }
],
}
然后像這樣實(shí)現(xiàn)它：
{this.state.records.map(({ date, caseId }) => (
<tr>
<td>{date}</td>
<td>{caseId}</td>
</tr>
))}
我使用caseIdnot 來(lái)代替，case因?yàn)樗點(diǎn)ase是 JavaScript 中語(yǔ)句的保留字switch。
慕尼黑的夜晚無(wú)繁華
TA貢獻(xiàn)1864條經(jīng)驗(yàn) 獲得超6個(gè)贊
您可以使用index映射函數(shù)中的參數(shù)并訪問(wèn)案例數(shù)組
<tbody>
{this.state.dates.map((el, index) => (
<tr>
<td>{el}</td>
<td>{this.state.cases[index]}</td>
</tr>
))}{" "}
</tbody>;
- 2 回答
- 0 關(guān)注
- 219 瀏覽
添加回答
舉報(bào)
0/150
提交
取消