在其他组件上添加 post 后自动响应更改状态

Question

我想创建工单功能。在主页（父页面）上，我有一个 axios get 函数，一旦页面加载，useEffect 就会列出所有票证组件。

在第二页上，我有子组件，我在其中导入了道具 reloadTickets={fetchTickets} 方法，每次添加新票时都会使用该方法。

问题是，如果我添加 post，第一次 post 没有添加，第二次 post 添加两次，第三次 post 在单个表单提交上添加了太多次。有时 post 根本没有添加，但在我尝试更多次后， post 添加了两次和更多.....

这是我的父组件N

这是我的子组件

PS。对不起的图片。但是反应代码无法格式化以在我的页面上看起来不错。

Answer 1

问题是您没有等待 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);
    });
  }

但我会推荐异步等待方法，而且你应该在 TicketsComponent -> fetchTickets 中重构你的代码以匹配它。为什么？因为 async await 是一种更加清晰和现代的方法，并且您正在避免潜在的回调地狱，例如，如果您现在想要等待 reloadTickets 函数正确结束。您可以在此处找到有关此主题的更多信息： https://www.loginradius.com/blog/async/callback-vs-promises-vs-async-await/

在其他组件上添加 post 后自动响应更改状态

React change state automatically after a post has been added on other component

api

reactjs

axios