React：在render方法中遍历repo对象数组的正确方式是什么？

首先，先纠正你代码里的小问题：你现在用map的方式其实不符合它的设计意图——map是用来转换数组、返回新数组的，而不是用来执行push这种副作用操作的。下面分两种常见场景来说明正确的做法：

1. 只是收集数据（比如你的names和watchers数组） #

如果你的目的是从repos数组里提取特定字段，不用先声明空数组再push，直接用map生成新数组更简洁、符合函数式编程的思路：

render() {
  const names = this.props.repos.map(repo => repo.name);
  const watchers = this.props.repos.map(repo => repo.watchers);
  
  // 之后可以用names和watchers做其他处理
  return (...)
}

如果只是要执行副作用（比如打印、修改外部变量），那应该用forEach而不是map——毕竟forEach就是专门用来遍历执行逻辑的：

render() {
  const names = [];
  const watchers = [];
  
  this.props.repos.forEach(repo => {
    names.push(repo.name);
    watchers.push(repo.watchers);
  });
  
  return (...)
}

2. 在render中渲染每个repo的UI元素 #

这是React里遍历数组最常见的场景——把数组元素转换成对应的JSX组件。直接在JSX里使用map返回元素即可，一定要给每个元素加唯一的key：

render() {
  return (
    <div className="repo-list">
      {this.props.repos.map(repo => (
        // 优先用repo的唯一标识作为key，比如后端返回的id；如果没有才考虑用index
        <div key={repo.id} className="repo-item">
          <h4>仓库名称：{repo.name}</h4>
          <p>关注人数：{repo.watchers}</p>
        </div>
      ))}
    </div>
  );
}

关于key的重要提示 #

• key是React用来识别列表元素身份的标识，必须是每个元素唯一的字符串或数字
• 尽量不要用数组的index作为key（除非数组是静态的、不会重新排序/增删），否则会导致React渲染错误或性能问题
• 优先使用数据本身的唯一标识，比如后端返回的id字段

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