React中如何遍历数组并使用map函数生成表格行？

当然能用map函数遍历coinlist生成表格行，但你写的代码存在两处需要修正的地方：

1. return后的语法错误：你用大括号{}包裹了JSX，这会被解析成对象字面量而非JSX元素，应该改用小括号()包裹，或者直接去掉大括号（如果是单行返回的话）。
2. 缺少key属性：React列表渲染要求每个子元素必须有唯一的key属性，用来帮助React识别元素变化，避免渲染警告。

修正后的代码示例 #

<tbody>
  {coinlist.map((coin) => (
    <tr key={coin.symbol}>
      <td>{coin.symbol}</td>
      <td>{coin.price}</td>
    </tr>
  ))}
</tbody>

如果习惯用大括号包裹函数体，也可以这样写：

<tbody>
  {coinlist.map((coin) => {
    return (
      <tr key={coin.symbol}>
        <td>{coin.symbol}</td>
        <td>{coin.price}</td>
      </tr>
    );
  })}
</tbody>

注意：key属性的值要保证在列表中唯一，这里假设coin.symbol不会重复，如果有重复的情况，建议使用其他唯一标识（比如每个coin对象的id字段）。

内容的提问来源于stack exchange，提问作者Yatin Choudhary