未捕获类型错误：toDo 未定义，警告：列表中的每个孩子都应该有一个唯一的"key"道具

Question

(将todo发送为todo-我认为问题已经存在，但不知道解决方案(

todos.js文件

import React from 'react'
import {Todo} from './todo';
export const Todos = (props) => {
return (
<div className='container'>
<h3>Todo List</h3>
{props.toDos.map((todo) => {
return <Todo toDo={todo}/>;
})}
</div>
)
}

todo.js文件

import React from 'react';
export const Todo = ({toDo}) => {
return (
<div>
<h4>{toDo.title}</h4>
<p>{toDo.desc}</p>
</div>
)

}

Answer 1

1. toDo is undefined
   确保toDos道具不包含任何未定义的值。

2. Each child in a list should have a unique "key" prop
   React中数组中的元素应该有键。如果你的todo有一个唯一标识它们的属性，比如todo.id，你可以这样做：

export const Todos = (props) => {
return (
<div className='container'>
<h3>Todo List</h3>
{props.toDos.map((todo) => {
return <Todo toDo={todo} key={todo.id}/>;
})}
</div>
)
}

如果没有任何todo.id属性或等效属性，则仅当todo列表是永远不会改变其元素顺序，您可以使用列表索引：

export const Todos = (props) => {
return (
<div className='container'>
<h3>Todo List</h3>
{props.toDos.map((todo, index) => {
return <Todo toDo={todo} key={index}/>;
})}
</div>
)
}