添加Key后仍出现React列表项Key错误，求技术排查方案

我在使用Material-UI构建Footer列表时，明明已经在ListItem组件上添加了key，控制台却还是弹出React列表项缺少key的错误。

现有代码 #

列表容器组件（FooterList.jsx） #

import { List, ListItemText, ListItem } from '@mui/material';

import FooterItem from './FooterItem';

const FooterList = ({ title, items }) => {
    return (
        <List>
            {/* HEADING */}
            <ListItem key={title}>
                <ListItemText sx={{ marginLeft: 2 }}>{title}</ListItemText>
            </ListItem>
            {/* LIST */}
            {items.map((item) => {
                return <FooterItem text={item.text} url={item.url} id={item.id}></FooterItem>;
            })}
        </List>
    );
};
export default FooterList;

列表项组件（FooterItem.jsx） #

import { ListItemText, ListItem, ListItemButton } from '@mui/material';
const FooterItem = ({ id, text, url }) => {
    console.log(id);
    return (
        <ListItem key={id}>
            <ListItemButton>
                <ListItemText href={url} sx={{ color: 'white', marginTop: '0' }}>
                    {text}
                </ListItemText>
            </ListItemButton>
        </ListItem>
    );
};

export default FooterItem;

问题原因 #

React要求key必须添加在map()循环直接返回的顶层元素/组件上，而不是组件内部的嵌套元素。你当前把key加在了FooterItem内部的ListItem上，但React处理列表时，只会识别循环生成的FooterItem组件上的key，无法感知到子组件内部的key，因此依然会报错。

解决步骤 #

1. 将key移到循环渲染的FooterItem上
   修改FooterList中的map循环部分，把key={item.id}直接加在FooterItem组件上：

{items.map((item) => {
    return <FooterItem key={item.id} text={item.text} url={item.url} id={item.id}></FooterItem>;
})}

2. （可选）移除子组件内部的key
   既然已经在循环的顶层组件上设置了key，FooterItem内部的ListItem上的key可以移除，避免冗余：

const FooterItem = ({ id, text, url }) => {
    console.log(id);
    return (
        <ListItem>
            <ListItemButton>
                <ListItemText href={url} sx={{ color: 'white', marginTop: '0' }}>
                    {text}
                </ListItemText>
            </ListItemButton>
        </ListItem>
    );
};

原理说明 #

React通过key来唯一标识列表中的每个元素，以此优化重渲染性能、避免组件状态混乱。key必须直接绑定到循环生成的每个节点上，这样React才能在列表更新时准确追踪元素的变化。

内容的提问来源于stack exchange，提问作者Manea Valenti Cornel