我正在尝试从 mongodb 服务器呈现数据以响应应用程序。 它不工作

Question

This is the console log error

Uncaught Error: Objects are not valid as a React child (found: object with keys {_id, inputText, __v}). If you meant to render a collection of children, use an array instead.
at throwOnInvalidObjectType (react-dom.development.js:14887:1)
at reconcileChildFibers (react-dom.development.js:15828:1)
at reconcileChildren (react-dom.development.js:19167:1)
at updateHostComponent (react-dom.development.js:19924:1)
at beginWork (react-dom.development.js:21618:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
at performUnitOfWork (react-dom.development.js:26557:1)

I am being able to save my input to the server but am getting error while trying to fetch it. Here's the component which is supposed to return the list.

import React, { useState, useEffect } from "react";
import ToDoItem from "./ToDoItem";
import InputArea from "./InputArea";
import "bootstrap/dist/css/bootstrap.min.css";
import axios from "axios";

const ToDoList = () => {
const [x, setX] = useState([]);
const xList = () => {
return x.map((y,index) => {
  return <ToDoItem key={index} text={y} />;
});
};
useEffect(() => {
axios
  .get("http://localhost:5000/")
  .then((res) => {
    setX(res.data);
  })
  .catch((err) => console.log(err));
  }, []);

 return (
 <div className="container">
  <div className="heading">
    <h1>To-Do List</h1>
  </div>
  <InputArea />
  <div>{xList()}</div>
 </div>
 );
 };

 export default ToDoList;

Answer 1

That specific error usually occurs when you are trying to print out an entire object instead of lets say the properties from each object.

Can you console.log the list and let us know what properties you have for each object?