如何在 React 中使用 UseEffect Axios API 调用填充 ToDo 列表？

Question

我正在尝试使用 API 调用从我的数据库中获得的所有任务来填充我的待办事项列表。不幸的是，什么都没有出现。我的 API 调用正在运行，因为 console.log(response.data) returns 我的数据库中有 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>

如何在 React 中使用 UseEffect Axios API 调用填充 ToDo 列表？

How to populate ToDo list with UseEffect Axios API call in React?

javascript

reactjs

styled-components