todoApi.ts:
import axios, {AxiosResponse} from "axios";
const API_URL: string = "http://localhost:8080/api/v1/todo/";
export async function getTodos(filter: string): Promise<[]> {
const response: AxiosResponse = await axios.get(API_URL, {
headers: {
filter: filter
}
});
return await response.data;
}
API 回應示例：
[
{
"id": 1,
"name": "Todo",
"description": "Todo description",
"done": false,
"dateCreated": "2022-10-18",
"deadline": "2022-10-19"
},
{
"id": 2,
"name": "Todo1",
"description": "Todo1 description",
"done": false,
"dateCreated": "2022-10-18",
"deadline": "2022-10-20"
}
]
App.tsx：（請原諒我的命名約定不好）
import {getTodos} from "../api/todoApi";
let counter: number = 0;
export default function App(): JSX.Element {
const [todos, setTodos] = useState([]);
useEffect(() => {
setInterval(() => {
let _todos: ReactElement[] = [];
getTodos(sessionStorage.getItem("search-key") as string).then((__todos) => {
for (let i: number = 0; i < __todos.length; i ) {
const todo = __todos[i];
_todos.push(
<Todo key={counter} id={todo["id"]} name={todo["name"]}
description={todo["description"]}
dateCreated={todo["dateCreated"]} deadline={todo["deadline"]}
done={todo["done"] === "true"}/>
);
counter ;
}
});
// @ts-ignore
setTodos(_todos);
}, 500);
}, []);
return (
<>
<div id={"todos"}>
// some other components
{todos}
// some other components
</div>
</>
);
}
- 待辦事項陣列未呈現，盡管在對元素做出反應或記錄待辦事項陣列時，我得到了正確的結果。
- Todo 組件只回傳一個帶有 todo 類的 div 和每個 prop 的 h1。
uj5u.com熱心網友回復：
注意：將組件存盤在 state 中是個壞主意。相反，存盤資料，然后映射資料以組成組件
您的問題來自這樣一個事實，即您在設定狀態 ( .then)后setTodos(_todos);加載了承諾 () ，這意味著_todos是一個空陣列。
如果你移動setTodos(_todos);你的for(){}回圈下面，它會起作用。然而，再一次，這是不好的做法，我敦促您繼續研究更好的方法來做到這一點:)
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/517329.html
下一篇：如何折射柏樹的承諾代碼