在其他組件上添加帖子后自動響應更改 state

Question

我想創建一個票證功能。 在主頁（父級）上，我有一個 axios get function，一旦頁面加載，useEffect 就會列出所有票證組件。

在第二頁上，我有一個子組件，我在其中導入了道具reloadTickets={fetchTickets}方法，每次我添加新票時都會使用該方法。

問題是，如果我添加一個帖子，第一次沒有添加帖子，第二次添加了兩次帖子，第三次帖子在單個表單提交上添加了太多次。 有時候帖子根本就加不上，但我試了幾次后，帖子又加了兩次……

• 這是我的父組件

• 這是我的子組件

附言。 對不起的圖片。 但是無法將反應代碼格式化為在我的頁面上看起來不錯。

Answer 1

那么問題是你沒有等待 axios 調用完成，因為 axios.post 方法是異步的。 您需要使 function 異步並等待 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 中重構你的代碼以匹配它。 為什么？ 因為 async await 是一種更加清晰和現代的方法，並且您正在避免潛在的回調地獄，例如，如果您現在想要等待 reloadTickets function 正確結束。 您可以在此處找到有關此主題的更多信息： https://www.loginradius.com/blog/async/callback-vs-promises-vs-async-await/