我是反應(yīng)新手。如何使用“map”函數(shù)在兩列中列出兩個不同數(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貢獻1836條經(jīng)驗 獲得超3個贊
快速簡單的解決方案： 不推薦
如果你總是假設(shè)dates和cases總是相同的長度，那么你可以這樣做：
{this.state.dates.map((el, index) => (
<tr>
<td>{this.state.dates[index]}</td>
<td>{this.state.cases[index]}</td>
</tr>
))}
該方法利用了函數(shù)index的參數(shù)map。然后您可以訪問指定索引處的數(shù)組。
推薦解決方案：
通常的做法是按記錄對數(shù)據(jù)進行分組。
使用您的示例，使用如下結(jié)構(gòu)：
state = {
records: [
{ date: '2000', caseId: '1' },
{ date: '2001', caseId: '2' },
{ date: '2002', caseId: '3' }
],
}
然后像這樣實現(xiàn)它：
{this.state.records.map(({ date, caseId }) => (
<tr>
<td>{date}</td>
<td>{caseId}</td>
</tr>
))}
我使用caseIdnot 來代替，case因為它case是 JavaScript 中語句的保留字switch。
慕尼黑的夜晚無繁華
TA貢獻1864條經(jīng)驗 獲得超6個贊
您可以使用index映射函數(shù)中的參數(shù)并訪問案例數(shù)組
<tbody>
{this.state.dates.map((el, index) => (
<tr>
<td>{el}</td>
<td>{this.state.cases[index]}</td>
</tr>
))}{" "}
</tbody>;
- 2 回答
- 0 關(guān)注
- 166 瀏覽
添加回答
舉報
0/150
提交
取消