类型 'TodoModel' 不可分配给类型 'ReactNode'

Question

我正在用react typescript构建一个todo应用程序。我是新手，我正在将道具传递给单个todo组件。但它显示了同样的错误。请帮助

type Props = {
todo: TodoModel;
todos: TodoModel[];
setTodos: React.Dispatch<React.SetStateAction<TodoModel[]>>;
};
const Todo = ({ todo, setTodos, todos }: Props) => {
const removeTodo = (id: number) => {
setTodos(todos.filter(todo => todo.id !== id));
};
return (
<div>
<ListItem>
<ListItemText style={{ color: "#f1f1ef" }} primary={todo} />
<IconButton>
<DoneIcon />
</IconButton>
<IconButton>
<EditIcon />
</IconButton>
<IconButton onClick={() => removeTodo(todo.id)}>
<DeleteIcon />
</IconButton>
</ListItem>
</div>
);
};
export default Todo;

这是整个代码的链接。。。

Answer 1

这是我的错，我想明白了。我传递的是整个对象，而不是单个todo属性。

应该是这样的。。。

return (
<div>
<ListItem>
<ListItemText style={{ color: "#f1f1ef" }} primary={todo.todo} />
<IconButton>
<DoneIcon />
</IconButton>
<IconButton>
<EditIcon />
</IconButton>
<IconButton onClick={() => removeTodo(todo.id)}>
<DeleteIcon />
</IconButton>
</ListItem>
</div>
);