如何使用 React 列出表中的元素？

Question

我是反应新手。如何使用“map”函数在两列中列出两个不同数组的元素？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>  )}

Answer 1

快速简单的解决方案： 不推荐

如果你总是假设dates和cases总是相同的长度，那么你可以这样做：

{this.state.dates.map((el, index) => (

  <tr>

    <td>{this.state.dates[index]}</td>

    <td>{this.state.cases[index]}</td>

  </tr>

))}

该方法利用了函数index的参数map。然后您可以访问指定索引处的数组。

推荐解决方案：

通常的做法是按记录对数据进行分组。

使用您的示例，使用如下结构：

state  = {

  records: [

    { date: '2000', caseId: '1' },

    { date: '2001', caseId: '2' },

    { date: '2002', caseId: '3' }

  ],

}

然后像这样实现它：

{this.state.records.map(({ date, caseId }) => (

  <tr>

    <td>{date}</td>

    <td>{caseId}</td>

  </tr>

))}

我使用caseIdnot 来代替，case因为它case是 JavaScript 中语句的保留字switch。

Answer 2

您可以使用index映射函数中的参数并访问案例数组

<tbody>

  {this.state.dates.map((el, index) => (

    <tr>

      <td>{el}</td>

      <td>{this.state.cases[index]}</td>

    </tr>

  ))}{" "}

</tbody>;