Javascript 如何发出两个axios请求并将两个响应保存在一个钩子中？

我正在使用

Axios

对后端进行API调用。问题是，我想发出一个调用，将响应保存在钩子中，而不是发出另一个调用并将响应保存在同一个钩子中。我必须在收到第一个呼叫的响应后拨打第二个呼叫，因为在我的后端，第二个呼叫会侦听EventMiter：

const [invoice, setInvoice] = useState({
    loading: false,
    error: false,
    content: null,
    paid: false
  });

function createInvoice() {
    setInvoice({ ...invoice, loading: true });
    api
      .post("/lightning/createinvoice", {
        amount: values.amount
      })
      .then(response => {
        setInvoice({
          loading: false,
          error: false,
          content: response.data,
          paid: false
        });
        return api.get("/lightning/invoicestatus", {
          params: { id: response.data.id }
        });
      })
      .then(response => {
        if (response.data.status === "Confirmed")
          setInvoice({ ...invoice, paid: true });
      })
      .catch(() => {
        setInvoice({ loading: false, error: true, content: null });
      });
  }

此代码有效，但是我得到了

发票。内容：null

。我怀疑

setInvoice（{…invoice，paid:true}）失败，因为
发票
状态没有其最新状态

我该怎么修

提前感谢
我制定了一个更清晰、可读性更强的方法，而不仅仅是承诺回调。如果您发现任何问题，请告诉我，因为我不确定您可以测试的实际API调用。但是下面的代码应该是不负责任的

  const [invoice, setInvoice] = useState({
    loading: false,
    error: false,
    content: null,
    paid: false
  });

  const createInvoice = async (api, values) => {
    try {
      setInvoice({ ...invoice, loading: true });
      const firstResponse = await api.post("/lightning/createinvoice", {
        amount: values.amount
      });
      setInvoice({
        ...invoice,
        content: firstResponse.data
      });

      const secondResponse = await api.get("/lightning/invoicestatus", {
        params: { id: firstResponse.data.id }
      });

      if (secondResponse.data.status === "Confirmed") {
        setInvoice({ ...invoice, paid: true });
      }
    } catch (err) {
      setInvoice({ loading: false, error: true, content: null });
    }
  };

根据您的代码，您可能想查看一下，
content
唯一为空的时间是当您的请求捕获到错误时。您是否确保进入第二个
。然后
呼叫，检查
状态===“已确认”？
Hi@AfikDeri。是的，我确定，我的后端正在接收第二次调用，并且，
invoice.paid
正在设置为
true
如果在第二次api调用之前检查
内容
，您是否看到在您的状态下正确设置了数据？您实际在哪里检查它是否为
null
？第一个
响应中的数据是什么？了解后端正在接收的信息只是调试这个过程的一部分。可以通过使用浏览器开发工具了解很多信息。例如，检查“网络”选项卡中的实际请求比我的方法要好得多。我要重构它。谢谢