我正在嘗試使用 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;
uj5u.com熱心網友回復：
請提供return內tasks.map()
<ToDoFull>
{tasks.map((task) => {
return (<ToDoInner>
<ID>{task.taskid}</Title>
<Title>{task.title}</Title>
<Description>{task.description}</Description>
</ToDoInner>);
})}
</ToDoFull>
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/432996.html
標籤：javascript 反应 样式化组件
上一篇：使用create-react-app創建應用程式后，陣列中的元素缺少“鍵”道具
下一篇：如何使用refs測驗反應組件？