React JS如何正确渲染数组中的对象及其属性？

原代码存在的问题 #

• 变量命名冲突：map回调的参数名和外层数组champions重名，属于变量遮蔽问题，建议单个遍历项使用单数形式champion做区分，提升代码可读性
• 错误使用DOM属性：原生<div>标签不存在name/sport/games这类自定义属性，直接传入不会渲染可见内容还会触发控制台警告，对象属性值需要作为子节点写入标签内部才能展示
• 缺失必填key属性：React遍历渲染列表时，要求每个列表最外层元素必须传入唯一的key值，用于虚拟DOM对比优化，避免列表更新时出现渲染错乱
• 语法闭合错误：原代码中map方法的括号、JSX标签闭合位置错误，会直接导致编译失败

可直接运行的正确代码 #

import React from 'react';
import './App.css';
// 未使用的logo导入可以直接删除，避免无意义的编译提示

const champions = [
  {
    id: 1, // 实际项目优先用数据自带的唯一id做key，无唯一id时可临时用数组索引
    champName: 'Ivan Ivanov',
    sport: 'weightlifting',
    games: 'Barcelona 1992',
  },
  {
    id: 2,
    champName: 'Ekaterina Dafovska',
    sport: 'biathlon',
    games: 'Nagano 1998',
  },
];

function App() {
  return (
    <div className="champion-list">
      {champions.map((champion) => (
        // 每个列表项必须绑定当前列表范围内唯一的key值
        <div className="champion-card" key={champion.id}>
          <h3>{champion.champName}</h3>
          <p>参赛项目：{champion.sport}</p>
          <p>所属赛事：{champion.games}</p>
        </div>
      ))}
    </div>
  );
}

export default App;

后续开发扩展提示 #

• 开发卡片、列表类组件时，可以把单个冠军项的JSX抽成独立的可复用组件，比如ChampionCard，遍历的时候直接传入props渲染即可，减少重复代码
• 布局、卡片样式可以通过给对应标签绑定className，在App.css中编写样式规则实现
• 注意：尽量不要用遍历索引作为key值，尤其是列表后续会涉及增删、排序操作的场景，很容易引发表单项错位、渲染状态错误等问题

内容的提问来源于stack exchange，提问作者D B