React列表子项唯一key警告排查：组件key设置问题咨询

核心问题：key的位置错误 #

你把key加在了<AccordionItem>上，但React要求数组中每个直接渲染的元素必须拥有唯一key。你的eventList数组里的每一项是<React.Fragment>，所以key应该加在这个Fragment上，而非内部组件。

额外问题：key值的选择不严谨 #

你用了forEach的第二个参数（数组索引）作为key，这在数组元素顺序变化、增删时会导致React错误复用组件。建议用printEvent自身的唯一标识（比如printEvent.id）作为key，而非索引。

修正后的代码片段 #

方式一：修正原有forEach逻辑 #

let eventList: React.ReactNode[] = [];

box.descEvents.forEach((printEvent: PrintEvent) => {
  if (!printEvent) return;

  // 把key加在最外层Fragment上，并用printEvent自身的id作为key值
  eventList.push(
    <React.Fragment key={printEvent.id}>
      <AccordionItem
        printEventDisplay={printEventDisplay}
        printEvent={printEvent}
        eventName={eventName}
        eventSource={eventSource || null}
        eventID={eventID}
        eventLineNumber={eventLineNumber}
        printEventValue={printEventValue}
        eventKey={printEvent.id} // 此为组件内部props，与React的key无关，可保留
      />
    </React.Fragment>
  );
});

方式二：用map替代forEach（更推荐，符合React写法习惯） #

// 直接过滤无效项后用map生成数组，避免手动push
const eventList = box.descEvents
  .filter(Boolean)
  .map((printEvent: PrintEvent) => (
    <React.Fragment key={printEvent.id}>
      <AccordionItem
        printEventDisplay={printEventDisplay}
        printEvent={printEvent}
        eventName={eventName}
        eventSource={eventSource || null}
        eventID={eventID}
        eventLineNumber={eventLineNumber}
        printEventValue={printEventValue}
        eventKey={printEvent.id}
      />
    </React.Fragment>
  ));

关键说明 #

• key仅需加在数组直接渲染的最外层元素上，无需在内部组件重复添加（除非内部组件本身也是数组渲染的一部分）。
• 优先使用数据自身的唯一ID作为key，避免用数组索引，除非数组是静态且不会发生变化。

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