未捕獲的錯誤：對象作為 React 子對象無效（發現：object 和鍵 {todo}）。 如果您打算渲染一組孩子，請使用數組

Question

我目前正在做一個 mern 應用程序，我遇到了以下問題

我正在調用我的 API，它給了我一個數組，當我嘗試通過它 map 時，它給出了一個錯誤

我正在接收一個數組，在那個數組里面，里面還有另一個數組，我需要那個數組的信息，但是我不能使用 map function

在這里，我正在嘗試 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

Answer 1

您可以訪問該數組的方式，在映射到第一個數組之后，它是 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((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;