未捕获的错误：对象作为 React 子对象无效（发现：object 和键 {todo}）。 如果您打算渲染一组孩子，请使用数组

Question

i'm doing a mern app currently and i got the following problem

I'm making a call to my API, and it gives me an array, and when i try to map over it, it gives an error

I'm receiving an array, and inside that array, there's another array inside, and i need the information of that array, but i can't use the map function

Here i'm trying to map the array

import React from "react";

import { TodoMain, Todo, Close, CloseIcon, TaskContainer } from "./ToDoStyled";

import { useSelector, useDispatch } from "react-redux";

const ToDo = ({ setTodo, idRoom, setIdRoom }) => {
  const handleTodo = () => {
    setTodo(false);
    setIdRoom("");
    document.body.style = "overflow: auto";
  };

  const user = JSON.parse(localStorage.getItem("profile"));

  const todo = useSelector(state => state.tasks);

  console.log(todo);

  return (
    <div>
      <TodoMain>
        <Todo>
          <Close>
            <CloseIcon onClick={handleTodo} />
          </Close>
          <TaskContainer>
            {todo.map((task) => {
              return (
                <div key={task._id}>
                  <h1>{task.task}</h1>
                </div>
              );
            })}
          </TaskContainer>
        </Todo>
      </TodoMain>
    </div>
  );
};

export default ToDo;

And this is how the data looks like, i need to get to that information, but i don't know how

i've tried everything in these 5 hours, trying to change the structure of the data, triying to change the behavior in the backend so i can send the data to the DB in a different way, but this is literally so far the only way to receive the data, and i'm stuck at this:7

Answer 1

the way you can access to that array, it's to map over it after mapping over the first array, here's how you would to it

import React from "react";

import { TodoMain, Todo, Close, CloseIcon, TaskContainer } from "./ToDoStyled";

import { useSelector, useDispatch } from "react-redux";

const ToDo = ({ setTodo, idRoom, setIdRoom }) => {
  const handleTodo = () => {
    setTodo(false);
    setIdRoom("");
    document.body.style = "overflow: auto";
  };

  const user = JSON.parse(localStorage.getItem("profile"));

  const todo = useSelector(state => state.tasks);

  console.log(todo);

  return (
    <div>
      <TodoMain>
        <Todo>
          <Close>
            <CloseIcon onClick={handleTodo} />
          </Close>
          <TaskContainer>
            {todo.map((data) => {
              const {task,_id} = data
              return (
                <div key={_id}>
                {task.map((stuff)=>{
                  const {todo,name,room} = stuff
                  return(
                <h1 style={{color: 'white'}} >{todo}</h1>
                  )
                })}
                  
                </div>
              );
            })}
          </TaskContainer>
        </Todo>
      </TodoMain>
    </div>
  );
};

export default ToDo;