未捕获的错误：对象作为 React 子对象无效找到：带有键 {todo} 的对象如果您打算渲染一组子项，请使用数组

如何解决未捕获的错误：对象作为 React 子对象无效找到：带有键 {todo} 的对象如果您打算渲染一组子项，请使用数组

我目前正在做一个 mern 应用程序，但遇到以下问题

我正在调用我的 API，它给了我一个数组，当我尝试映射它时，它给出了一个错误

我正在接收一个数组，在那个数组里面，还有另一个数组，我需要那个数组的信息，但是我不能使用map函数

这里我正在尝试映射数组

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;

这就是数据的样子，我需要获取这些信息，但我不知道如何

我在这 5 个小时内尝试了所有方法，尝试更改数据的结构，尝试更改后端的行为，以便我可以以不同的方式将数据发送到数据库，但这实际上是到目前为止接收数据的唯一方法，我被困在这个：7

解决方法

访问该数组的方式，是在映射第一个数组后对其进行映射，这是您的方法

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;