React列表已加key仍报‘子元素需唯一key’警告求助

你遇到的问题是key属性加错了位置，React要求key必须绑定在循环生成的列表顶层元素上，而非内部子元素。

问题分析 #

你当前把key加在了<ListItemText>上，但React的列表key规则是：key需要放在循环渲染的每个列表项的最外层元素上，也就是<ListItem>这个层级，这样React才能正确识别每个独立的列表项。

修正方案 #

方案1：在父组件循环渲染时给Todo组件加key

如果Todo是单个列表项组件，在父组件循环生成列表时，直接给Todo绑定key：

// 父组件示例
function TodoList() {
  // 假设todoList是从Firestore获取的文档数组
  return (
    <List>
      {todoList.map(todo => (
        <Todo key={todo.id} data={{ todo }} />
      ))}
    </List>
  );
}

方案2：在Todo组件内部给ListItem加key

如果要在Todo组件内部处理key，直接把key绑定到<ListItem>上：

function Todo(props){
    return(
        <ListItem key={props.data.todo.id}>
            <ListItemText />
        </ListItem>
    );
}

（注意：这里外层的<List>应该放在父组件中，避免每个Todo都渲染一个独立的List）

关键注意点 #

• key必须在同级列表项中唯一，使用Firestore文档的id是完美选择，因为它本身就是全局唯一的
• 不要把key加在列表项的子元素上，否则React仍然无法识别每个列表项的唯一性

内容的提问来源于stack exchange，提问作者MUHAMMAD SHAHID RAFI C P