React组件使用setState时报错：子元素需唯一key属性

嘿，这个警告我可太熟悉了！咱们先搞清楚为啥会出现它：React在渲染数组/迭代器里的子元素时，需要每个元素有一个唯一的key属性，这样它才能精准追踪每个元素的变化，避免不必要的重渲染，提升整体性能。

从你的代码逻辑来看，你在state里维护了sistemas数组，点击按钮更新它，然后应该是在render里用map渲染这个列表对吧？问题就出在渲染列表的时候，没给每个列表项加上key属性。

正确的解决方案分这几种，按优先级排序： #

1. 使用数据本身的唯一标识符（最优选择）

如果你的sistemas数组里的每个对象都有天然的唯一ID（比如后端返回的id字段），直接用它当key是最好的方式：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props)
    this.state = { sistemas: [] };
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    // 假设你往数组里添加带唯一id的新系统项
    const novoSistema = { id: Date.now(), nome: `Sistema ${this.state.sistemas.length + 1}` };
    this.setState(prevState => ({
      sistemas: [...prevState.sistemas, novoSistema]
    }));
  }

  render() {
    return (
      <div className="App">
        <button onClick={this.handleClick}>添加系统</button>
        {/* 给每个列表项绑定唯一key */}
        <ul>
          {this.state.sistemas.map(sistema => (
            <li key={sistema.id}>{sistema.nome}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default App;

2. 用数组索引当key（仅限静态列表，不推荐动态场景）

如果你的列表永远不会新增、删除或者重新排序，也可以用map的第二个参数（索引）当key，但要注意：如果列表有动态变化，用索引会导致React识别元素出错，引发奇怪的渲染问题。

{this.state.sistemas.map((sistema, index) => (
  <li key={index}>{sistema.nome}</li>
))}

3. 生成临时唯一key（实在没其他办法时用）

如果你的数据里没有任何唯一标识，也可以用Date.now()或者类似工具生成临时key，但这种方式每次重渲染都会生成新key，会导致React频繁重渲染列表，影响性能，所以尽量不用。

划重点： #

• key必须是唯一且稳定的，不能每次渲染都变化
• 不要用随机数当key，会导致组件不断卸载重新挂载
• key只需要在当前列表里唯一就行，不用全局唯一

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