Как сделать два аксиос запроса и сохранить оба ответа в хуке?

Question

Я использую Axios для выполнения вызовов API на мой бэкэнд. Проблема в том, что я хочу сделать вызов, сохранить ответ в ловушке, а затем сделать другой вызов и сохранить ответ в той же ловушке. Я должен сделать второй вызов после получения ответа от первого, поскольку в моем бэкэнде второй вызов прослушивает EventEmmiter:

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 });
      });
  }

Этот код работает, однако я получаю invoices.content: null. Я подозреваю, что setInvoice({ ...invoice, paid: true }); терпит неудачу, так как состояние invoice не имеет самого обновленного состояния.

Как это исправить?

Заранее спасибо

Answer 1

Я сделал более понятный, понятный подход, а не просто обещал обратные вызовы. Дайте мне знать, если вы обнаружите какую-либо проблему, поскольку я не уверен в ваших реальных вызовах 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 });
    }
  };