[英]How to populate ToDo list with UseEffect Axios API call in React?
I'm trying to populate my ToDo list with all the tasks I get from my database with an API call.我正在尝试使用 API 调用从我的数据库中获得的所有任务来填充我的 ToDo 列表。 Unfortunately, nothing is showing up.不幸的是,什么都没有出现。 My API call is working because the console.log(response.data)
returns the 3 tasks in my database, but my view is not updating with the data that I got from my call.我的 API 调用有效,因为console.log(response.data)
返回了我数据库中的 3 个任务,但我的视图没有更新我从调用中获得的数据。 I get no errors.我没有错误。
import axios from "../axios";
import {useState, useEffect } from "react";
import {ToDoFull,ToDoInner,Id,Title,Description} from "./StyledComponents.js";
const Tasks = () => {
const [tasks, setTasks] = useState([]);
useEffect(() => {
const fetchAllItems = async () => {
try {
const response = await axios.get("/tasks/all-tasks");
if (response.data !== "") {
console.log(response.data); //Prints out my three objects in an array in my console. works great
let objects = response.data.map(JSON.stringify);
let uniqueSet = new Set(objects);
let uniqueArray = Array.from(uniqueSet).map(JSON.parse);
setTasks(uniqueArray);
} else {
}
} catch (err) {
console.log(err);
}
};
fetchAllItems();
return () => {
setItems([]);
};
}, []);
return (
<>
<ToDoFull>
{tasks.map((task) => {
<ToDoInner>
<ID>{task.taskid}</Title>
<Title>{task.title}</Title>
<Description>{task.description}</Description>
</ToDoInner>;
})}
</ToDoFull>
</>
);
};
export default Tasks;
Please provide return
inside tasks.map()
请在tasks.map()
中提供return
<ToDoFull>
{tasks.map((task) => {
return (<ToDoInner>
<ID>{task.taskid}</Title>
<Title>{task.title}</Title>
<Description>{task.description}</Description>
</ToDoInner>);
})}
</ToDoFull>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.