我的網站上有一個待辦事項串列，如下所示：
待辦事項清單
當我單擊加號按鈕時，會出現一個輸入，我可以添加一個將專案添加到資料庫的專案。問題是，雖然它確實將專案添加到資料庫中，但在頁面重繪 之前它不會顯示在網頁上。這是添加按鈕：
<div>
<input
type="text"
onChange={(e) => setItem(e.target.value)}
/>
<button onClick={() => itemHandler()}>
Add
</button>
</div>
itemHandler 函式只是用新的待辦事項更新資料庫：
async function itemHandler() {
setAddItem(false)
const res = await fetch('/api/add-todo-item', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
user_id,
item
}),
})
const json = await res.json()
if (!res.ok) throw Error(json.message)
setItem("")
}
但是當這個函式運行時，資料庫會更新，但在頁面重繪 之前新專案不會顯示在網站上。
待辦事項最初作為引數傳遞給功能組件：
function ToDoList( {user_id, todo_items} ) { ...
那么有沒有辦法重繪 組件，同時在 itemHandler 將它們添加到資料庫后將更新版本的專案從資料庫傳遞給組件？
uj5u.com熱心網友回復：
添加try{...}catch(error){...}
到您的應用程式中，
也使用鉤子“useState”，就像 const [data,setData] = useState([]);
并在 中更新它，try以便您在頁面中看到它。
uj5u.com熱心網友回復：
請檢查回復，
我假設您在該請求的回應中獲得了更新的待辦事項。
因此，這意味著您可以輕松地將新的待辦事項（舊的待辦事項，包括您剛剛添加的新待辦事項）存盤在您的應用程式狀態中，遍歷它們并呈現它們:)
PS：如果你沒有在你的 POST 請求回應中得到它們，你可以在你的 POST 請求之后立即發送一個 GET 請求來獲取所有的 Todos。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/401814.html
標籤：javascript mysql 反应