React fetch возвращает неопределенное значение, но в консоли возвращает ответ

Question

Я вижу свой ответ в первой консоли, но затем он всегда undefined.

fetch("/api/v1/legacy/tenant-shop", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(dataToSubmit)
})
  .then(response =>
    console.log("THIS RESPONSE IS WORKING, IT CONSOLE 201", response.status)
  )
  .then(response => {
    if (response && response.status === 201) {
      console.log("BUT IT NEVER GOES THERE");
      this.props.router.push("/congratilations");
    } else {
      console.log("THE RESULT OF THIS CONSOLE IS NULL", response && response);
    }
  });

Answer 1

Вы ничего не возвращаете с первого .then(), поэтому следующее .then() не получает никакого полезного значения.

Попробуйте

fetch("/api/v1/legacy/tenant-shop", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(dataToSubmit),
})
  .then(response => {
    console.log("THIS RESPONSE IS WORKING", response.status);
    return response;  // <---- this is important
  })
  .then(response => {
    if (response && response.status === 201) {
      console.log("BUT IT NEVER GOES THERE");
      this.props.router.push("/congratilations");
    } else {
      console.log(
        "THE RESULT OF THIS CONSOLE IS NULL",
        response && response,
      );
    }
  });