我想創建一個票功能。在主頁（父級）上，我有一個 axios get 函式，一旦加載頁面，useEffect 就會列出所有票證組件。
在第二頁上，我有一個子組件，我用 props 匯入了reloadTickets={fetchTickets}每次添加新票時要使用的方法。
問題是，如果我添加一個帖子，一次沒有添加帖子，第二次添加了兩次帖子，第三次添加了一次表單提交的帖子太多次。有時帖子根本不加，但我嘗試更多次后，帖子加了兩次甚至更多......
- 這是我的父組件
- 這是我的子組件
PS。對不起圖片。但是反應代碼不能被格式化為在我的頁面上看起來不錯。
uj5u.com熱心網友回復：
那么問題是你沒有等待 axios 呼叫完成，因為 axios.post 方法是異步的。您需要使您的函式異步并等待 axios.post 方法，這是一個示例，您可以如何做到這一點。
const createTicket = async (e) => {
e.preventDefault();
try {
await axios.post(postTicketURL, {
userID: userID,
content: ticketArea
}, configHeader);
await reloadTickets();
}
catch (error) {
console.log(error);
}
}
更新：我看到你已經在你的父組件中使用 .then 和 .catch 方法，所以你可以這樣解決這個問題：
const createTicket = async (e: any) => {
e.preventDefault();
axios.post(postTicketURL, {
userID: userID,
content: ticketArea
}, configHeader).then((res: any) => {
console.log(res);
reloadTickets();
}).catch((err: any) => {
console.log(err);
});
}
但我會推薦 async await 方法，并且你應該在 TicketsComponent -> fetchTickets 中重構你的代碼以匹配它。為什么？因為異步等待是更加清晰和現代的方法，并且您正在避免潛在的回呼地獄，例如，如果您現在想要等待 reloadTickets 函式正確結束。您可以在此處找到有關此主題的更多資訊： https ://www.loginradius.com/blog/async/callback-vs-promises-vs-async-await/
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/450515.html
上一篇：如何進行分頁？
下一篇：ReactRouter的v6history.push('/')給出“未定義（讀取'路徑名'）”錯誤-url更改，但頁面保持不變