ReactJS数组遍历渲染：key警告与for循环语法错误解决

先纠正一个误解 #

map是JavaScript数组的原生方法，并非仅适用于Map数据结构，你最初用map遍历数组渲染的思路完全正确，控制台的警告只是因为没有给列表中的每个子元素添加唯一的key属性。

正确的map写法（解决key警告） #

遍历数组时，给每个渲染的子元素加上基于数据本身的唯一标识作为key（优先用后端返回的ID这类天然唯一值，避免用数组索引），示例代码：

render() {
  const items = [{id: 1, text: '选项1'}, {id: 2, text: '选项2'}, {id: 3, text: '选项3'}];
  
  return (
    <div className="item-list">
      {items.map(item => (
        <div key={item.id} className="item">
          {item.text}
        </div>
      ))}
    </div>
  );
}

key的作用是帮助React识别列表元素的唯一性，更新时更高效地复用DOM节点，避免不必要的重渲染。

用for循环的正确写法 #

如果一定要用for循环，不能直接在JSX中嵌入循环语句，需先在render函数内构建存储DOM元素的数组，再将数组渲染到JSX中，同时必须给每个元素加key：

render() {
  const items = [{id: 1, text: '选项1'}, {id: 2, text: '选项2'}, {id: 3, text: '选项3'}];
  const itemElements = [];
  
  for (let index = 0; index < items.length; index++) {
    const item = items[index];
    itemElements.push(
      <div key={item.id} className="item">
        {item.text}
      </div>
    );
  }
  
  return <div className="item-list">{itemElements}</div>;
}

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