Как мне перечислить элементы в таблице с помощью React?

Question

Я новичок в React. Как я могу перечислить элементы из двух разных массивов в двух столбцах, используя функцию «карта»?

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. Затем вы можете получить доступ к массиву по указанному указанному c индексу.

---

Рекомендуемое решение:

Обычная практика состоит в том, чтобы данные группировались по каждой записи. .

Используя ваш пример, используйте такую ​​структуру:

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>
))}

Я использую caseId вместо 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>;