如何在React中使用UseEffect Axios API调用填充待办事项列表

Question

我正在尝试用API调用从数据库中获得的所有任务填充ToDo列表。不幸的是，什么都没有出现。我的API调用正在工作，因为console.log(response.data)返回数据库中的3个任务，但我的视图没有使用从调用中获得的数据进行更新。我没有任何错误。

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;

Answer 1

请在tasks.map()内提供return

<ToDoFull>
{tasks.map((task) => {
return  (<ToDoInner>
<ID>{task.taskid}</Title>
<Title>{task.title}</Title>
<Description>{task.description}</Description>
</ToDoInner>);
})}
</ToDoFull>