反應錯誤：列表中的每個孩子都應該有一個唯一的“關鍵”道具

Question

我是 React 的初學者。 我寫了這段代碼並得到了一個錯誤

import { DoItem } from '../MyComponents/DoItem'
export const ToDo = (props) => {
    return (
        <div className="container">
            <h3 className="text-center">To Do List</h3>
            {props.todos.map((todo) => { 
                return ( 
                    <>
                        <DoItem const todo={todo} onDelete = {props.onDelete} /> 
                        <hr />
                    </>
                    ) 
            })}
        </div>
    )
}

這是錯誤列表中的每個孩子都應該有一個唯一的“關鍵”道具。

我上網查了一下，發現我必須使用密鑰。 我插入了鑰匙
<DoItem const todo={todo} key={todo.nos} onDelete = {props.onDelete} />

但是我重新加載頁面后錯誤仍然沒有消失。

Answer 1

import { DoItem } from '../MyComponents/DoItem'
export const ToDo = (props) => {
    return (
        <div className="container">
            <h3 className="text-center">To Do List</h3>
            {props.todos.map((todo, i) => { 
                return ( 
                    <key={i}>
                        <DoItem const todo={todo} onDelete = {props.onDelete} /> 
                        <hr />
                    </>
                    ) 
            })}
        </div>
    )
}

Answer 2

請為每個項目添加一個唯一的密鑰

{props.todos.map((todo, index) => { 
                return ( 
                    <div key={index}>
                        <DoItem const todo={todo} onDelete = {props.onDelete} /> 
                        <hr />
                    </div>
                    ) 
            })}

請試一試，讓我知道它是否有效。

Answer 3

是的，您應該在渲染數組的任何時候添加一個關鍵道具。

import { DoItem } from '../MyComponents/DoItem'
export const ToDo = (props) => {
    return (
        <div className="container">
            <h3 className="text-center">To Do List</h3>
            {props.todos.map((todo,index) => { 
                return ( 
                    <div key={index | the id of the todo}>
                        <DoItem const todo={todo} onDelete = {props.onDelete} /> 
                        <hr />
                    </div>
                    ) 
            })}
        </div>
    )
}