![](/img/trans.png)
[英]Uncaught Error:Objects are not valid as a React child (found: object with keys.If you meant to render a collection of children, use an array instead
[英]Uncaught Error: Objects are not valid as a React child (found: object with keys {todo}). If you meant to render a collection of children, use an array
我目前正在做一个 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
您可以访问该数组的方式,在映射到第一个数组之后,它是 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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.