React渲染MongoDB数据报错：Objects are not valid as a React child

错误原因 #

控制台报错Uncaught Error: Objects are not valid as a React child (found: object with keys {_id, inputText, __v})，核心原因是你直接把MongoDB返回的完整文档对象传给了ToDoItem组件，并尝试在组件内渲染这个对象，而React不允许直接渲染普通对象作为子元素。

从代码看，xList函数中你将数组中的每个对象y直接传给ToDoItem的text属性：

return <ToDoItem key={index} text={y} />;

而y是包含_id、inputText、__v的完整MongoDB文档对象，若ToDoItem组件直接渲染props.text，就会触发这个错误。

解决方法 #

方法1：传递对象中的具体属性（推荐） #

既然要显示的是待办文本，直接传递y.inputText给ToDoItem即可：

const xList = () => {
  return x.map((y, index) => {
    return <ToDoItem key={index} text={y.inputText} />;
  });
};

这样ToDoItem接收的是字符串，直接渲染就不会有问题。

方法2：传递完整对象，但在ToDoItem内渲染具体属性 #

如果ToDoItem需要用到_id等其他属性（比如删除功能），可以传递整个对象，但要在组件内明确渲染具体字段：

1. 修改ToDoList中的传参：

return <ToDoItem key={index} item={y} />;

2. 在ToDoItem组件中渲染具体属性：

// ToDoItem.js示例
const ToDoItem = ({ item }) => {
  return <div>{item.inputText}</div>;
};

额外优化建议 #

尽量避免使用数组索引作为key，如果MongoDB文档的_id是唯一的，改用y._id作为key会更稳定：

return <ToDoItem key={y._id} text={y.inputText} />;

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