React应用出现Warning: Each child in a list should have a unique "key" prop警告的问题排查求助

你遇到的问题其实出在嵌套map里的Fragment使用上！

看这段代码：

{user.perfil.map(perfis => (
  <>
    <div key={perfis.idPerfil}>
      <p>Perfil: {perfis.nomePerfil}</p>
    </div>
    {perfis.departamento.map(dep => (
      <div key={dep.idDepartamento}>
        <p>Departamento: {dep.nomeDepartamento}</p>
      </div>
    ) )}
  </>
) )}

你用了短语法的<>（Fragment）来包裹perfil相关的两个元素，但这个Fragment是user.perfil.map返回的直接子元素，它没有设置key。React要求列表中的每一个直接子元素都必须有唯一的key，哪怕是Fragment也不例外——你只给了里面的div加key，但外层的Fragment才是map迭代出来的列表项，所以React依然会抛出警告。

修复方案 #

把短语法Fragment换成完整的<React.Fragment>，并给它加上唯一的key（这里可以直接用perfis.idPerfil，因为它已经是唯一标识）：

{user.perfil.map(perfis => (
  <React.Fragment key={perfis.idPerfil}>
    <div key={perfis.idPerfil}>
      <p>Perfil: {perfis.nomePerfil}</p>
    </div>
    {perfis.departamento.map(dep => (
      <div key={dep.idDepartamento}>
        <p>Departamento: {dep.nomeDepartamento}</p>
      </div>
    ) )}
  </React.Fragment>
) )}

或者，如果你不想写完整的Fragment语法，也可以用一个带有key的普通div来包裹这两个元素（不过这样会多一层DOM节点，如果你在意DOM结构的话，还是推荐用带key的Fragment）。

另外，确认一下你用到的所有key（user.idUsuario、perfis.idPerfil、dep.idDepartamento）都是在当前列表中唯一的值——如果有重复的情况，也会触发警告，但从你的代码结构来看，这些应该都是后端返回的唯一ID，所以主要问题就是Fragment缺少key。

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