在嵌套數組上反應 map

Question

我從 firebase 獲取一組行，每一行看起來像下面的行。

row = [
    {
      index: 1,
      body: 'description'
      options: ['option1', 'option2', 'option3']
     
    }
]

我目前正在將這些行渲染到 React 中的表中，如下所示：

{this.state.rows.map((row) => (
  <TableRow key={row.visit}>
    <TableCell align="left">{row.index}</TableCell>
    <TableCell align="left">{row.body}</TableCell>
    <TableCell align="left">{row.options}</TableCell>
  </TableRow>))}

但是，我試圖讓選項位於下拉列表或類似列表中，以便看起來更整潔並且不會占用太多垂直空間。 有沒有辦法通過嵌套數組將 map 和 output 放入下拉列表？

Answer 1

您還可以 map 嵌套數據。 我建議使用select元素。

{this.state.rows.map((row) => (
  <TableRow key={row.visit}>
    <TableCell align="left">{row.index}</TableCell>
    <TableCell align="left">{row.body}</TableCell>
    <TableCell align="left">
      <select>
        {row.options.map((option, i) => (
          <option key={i} value={option}>{option}</option>
        ))}
      </select>
    </TableCell>
  </TableRow>
))}