Nextjs/React点击按钮取数时出现列表子元素唯一key属性错误

你遇到的Each child in a list should have a unique "key" prop错误，根源是列表的直接子元素没有绑定key。你现在把key加在了Fragment（<>）内部的div上，但React会将Fragment视为列表的直接子节点，而这个简写的Fragment不支持设置key，导致React无法识别每个列表项的唯一标识。

两种可行的解决方法： #

方法一：移除不必要的Fragment

如果你的列表项只需要返回一个最外层div，直接去掉Fragment，把key绑定到这个div上即可：

<button onClick={fetchReviewsFromServer}>Load Reviews From Server</button>
{
  reviewfromserver.map(reviewnew => {
    return(
      <div key={reviewnew.id}>
        <div>{reviewnew.id}- {reviewnew.title} </div>
      </div>
    )
  })
}

方法二：使用完整的React.Fragment并绑定key

如果确实需要保留Fragment（比如要返回多个同级元素），不能用简写的<>, 必须使用完整的<React.Fragment>标签并给它添加key：

import React from 'react';

// ...

<button onClick={fetchReviewsFromServer}>Load Reviews From Server</button>
{
  reviewfromserver.map(reviewnew => {
    return(
      <React.Fragment key={reviewnew.id}>
        <div>
          <div>{reviewnew.id}- {reviewnew.title} </div>
        </div>
      </React.Fragment>
    )
  })
}

关键说明： #

• React要求列表的每个直接子节点必须有唯一的key，key不能绑定在子节点内部的元素上
• 简写的Fragment（<>）不支持设置key属性，只有完整的<React.Fragment>可以添加key

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