Next.js列表渲染唯一key属性未生效报错排查

React的key校验规则只识别Array.map()循环返回的最外层根元素上的key属性，你当前代码把key加在了内层嵌套的KokoActorCard组件上，map返回的根节点是包裹用的<div>，这个div没有设置key，所以触发报错。
之前相同写法不报错，是因为当时map返回的根节点就是你绑定key的组件本身，没有额外套一层div容器。

{props.kokoActors.map((kokoActor) => {
  return (
    // 此处为map返回的根元素，缺失必填的key属性
    <div>
      <h1>{kokoActor.id}</h1>
      <KokoActorCard
        // key绑定在内层子组件上，不会被React识别为循环项的key
        key={kokoActor.id}
        actorName={kokoActor.name}
        role={kokoActor.role}
        imgUrl={kokoActor.imgUrl}
        href={kokoActor.websiteUrl}
      />
    </div>
  );
})}

你的KokoActorCard组件本身写法没有问题，不需要修改组件内部代码：

const KokoActorCard = (props) => {
  return (
    <StarringBox>
      <div>
        {" "}
        <br />
        <p>{props.actorName}</p>
      </div>
    </StarringBox>
  );
};

export default KokoActorCard;

二选一即可：

• 直接把key属性移动到map返回的最外层div上，无需改动其他结构
• 如果外层div没有实际布局作用，用React.Fragment替换多余的div节点，把key绑定在Fragment上，避免生成无意义的DOM元素

修复后代码（外层div绑定key） #

{props.kokoActors.map((kokoActor) => {
  return (
    // 根元素绑定唯一key，符合React校验规则
    <div key={kokoActor.id}>
      <h1>{kokoActor.id}</h1>
      <KokoActorCard
        actorName={kokoActor.name}
        role={kokoActor.role}
        imgUrl={kokoActor.imgUrl}
        href={kokoActor.websiteUrl}
      />
    </div>
  );
})}

修复后代码（Fragment无多余DOM写法） #

注意Fragment的短语法<></>不支持传入key属性，需要使用完整导入写法：

import { Fragment } from 'react';

// 组件内渲染部分
{props.kokoActors.map((kokoActor) => {
  return (
    <Fragment key={kokoActor.id}>
      <h1>{kokoActor.id}</h1>
      <KokoActorCard
        actorName={kokoActor.name}
        role={kokoActor.role}
        imgUrl={kokoActor.imgUrl}
        href={kokoActor.websiteUrl}
      />
    </Fragment>
  );
})}

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