React列表子元素唯一key prop警告：传入id仍报错求排查

问题根源 #

你当前的代码犯了两个关键错误：

1. key放错位置：React要求key必须添加到map()循环返回的最外层元素/组件上，而你把key放在了Todo组件内部的<li>标签上——React的列表diff算法只会识别循环根节点的key，子组件内部的key完全无效。
2. 用数组索引当key（不推荐）：虽然用i作为key能暂时消警告，但如果列表有增删、排序操作，索引会随元素位置变化，导致React复用错误的组件，引发状态混乱或渲染bug，优先用每个todo对象自身的唯一标识（比如后端返回的id字段）。

修正后的代码 #

TaskList组件（关键修正） #

import React from "react";
import Todo from "./todo";
const TaskList = ({ items }) => {
    return (
        <>
            {items.map((todo) => {
                // 把key直接加在循环返回的Todo组件上，用todo自身的唯一id
                return <Todo key={todo.id} todo={todo} />
            })}
        </>
    )
}

export default TaskList; 

Todo组件（移除无效key） #

import React from "react";
import './todo.css'
const Todo = ({ todo }) => {
    console.log(todo.id, todo);
    return (
        <div style={{ display: "flex" }}>
            <li
                style={{
                    cursor: "pointer",
                    marginRight: "1rem"
                }}
                className={todo.complete ? "strike" : ""} >
                {todo.task}
            </li>

            <button>
                Edit
            </button>
            <button>
                Delete button
            </button>
        </div>
    )
}

export default Todo;

额外说明 #

• 如果你的todo对象没有自带唯一id，且列表不会有增删排序操作，才可以临时用数组索引当key，但这是兜底方案，尽量避免。
• React的key是给React自身用的，不会传递给子组件，所以不需要在Todo组件里接收id props（除非你自己业务需要）。

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