React js：警告：列表中的每个子项都应该有一个唯一的“键”道具

你必须提供来自 React 的属性，而不是一个属性：keyid

 itemsDisplay = items.map((todo, i) => {
        return <Todo key={i} todo={todo} />
    });

快速提示：始终在迭代时（在迭代时）提供密钥，在这种情况下，您正在使用函数进行迭代，因此这有助于避免混淆。map()

从子 Todo 来看，它在这种情况下不起作用。React 就是这样工作的。

你必须把你放在'div'上，所以你的待办事项组件应该看起来像这样：key={id}

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

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

export default Todo;

React 使用 key prop 在组件和 DOM 元素之间创建关系。该库使用此关系来确定是否应重新呈现组件。

1. 您的组件名称应在 PascalCase 中。我还建议给它起个名字，因为它正在构建一个待办事项列表，并且一致性对于调试很有用。Todos

2. 无需在组件中创建空数组。据推测，您在组件中传递的数据是一个数组，因此您需要做的就是检查该数组是否为空。如果它是返回一些东西以显示没有数据 - 否则用于遍历数组。map

3. 重新提出问题：该属性应在地图迭代过程中添加。它不是需要传递给组件的东西。例如，如果你选择对列表重新排序，这只是 React 更好地协调更改的一种方式。key

4. 在最后一点上，不应将索引用于键值。希望您的待办事项每个都有一个 id。如果他们不考虑添加一个。然后，您可以将其用作键，也可以用作在添加该代码时可以完成/删除待办事项的机制。map

const { useState } = React;

function Todos({ todos }) {

  if (!todos.length) return <div>Empty</div>;

  return (
    <section>
      {todos.map(todo => {
        return <Todo key={todo.id} todo={todo} />
      })}
    </section>
  );

}

function Todo({ 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>
    </div>
  );
}

const todos = [
  { id: 1, task: 'Write task 1', complete: false },
  { id: 2, task: 'Write task 2', complete: false },
  { id: 3, task: 'Write task 3', complete: false }
];

const node = document.getElementById('root');
const root = ReactDOM.createRoot(node);
root.render(<Todos todos={todos} />);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.min.js"></script>
<div id="root"></div>