我用 fastapi 制作了一個簡單的 todo 應用程式并做出反應。如何顯示我的待辦事項？我嘗試使用 {todo.data}，但它不起作用。
那是我的 Todos.js 組件：
import React, { useEffect, useState } from "react";
export default function Todos() {
const [todo, setTodo] = useState([])
useEffect(() => {
fetch('http://localhost:8000/todos')
.then(response => response.json())
.then(json => setTodo(json))
}, [])
return (
<div>
<h1>My Todos:</h1>
<ui>
<li>
my todos
</li>
</ui>
</div>
)
}
這是 http://localhost:8000/todos 的樣子：
{
data: [
{
name: "buy bread",
is_done: false,
id: 1
},
{
name: "clean kitchen",
is_done: false,
id: 2
},
{
name: "string",
is_done: false,
id: 3
}
]
}
uj5u.com熱心網友回復：
首先，您需要映射回傳的資料。然后，您實際上需要在您的 return 陳述句中呈現它。
import React, { useEffect, useState } from "react";
export default function Todos() {
const [todo, setTodo] = useState([]);
useEffect(() => {
fetch("http://localhost:8000/todos")
.then((response) => response.json())
.then((json) => setTodo(json.data));
}, []);
return (
<div>
<h1>My Todos:</h1>
<ul>
{todo.map((todo) => (
<li key={todo.id}>
{todo.name} <input type="checkbox" checked={todo.is_done} />
</li>
))}
</ul>
</div>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/522325.html
標籤：反应api前端拿来