在其他组件上添加帖子后自动响应更改 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/