Fetch: POST JSON data in react.js

Question

I'm trying to POST a JSON object using fetch. On the client side I see all the data, In the API I get the object with NULL values

That's my call:

const onSubmit = async () => {
console.log(searchCases);
//  handleFormChange();
try {
  await fetch("/api/cases/create_search", {
    method: "POST",
    headers: {
      Accept: "application/json",

      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      searchCases,
    }),
  }).then(async (response) => {
    if (response.ok) {
      //let byteArray = await response.arrayBuffer();
      let byteArray = await response;
      let data = byteArray;
      setNewData(data);
      console.log(data);
    }
  });
} catch (e) {
  console.error(
    'Error: An error was detected in the function "fetch" /api/cases/create_search_case OR in msgpk:',
    e
  );


}

Answer 1

I'm not sure why do you have to use async/await in side then() . You can try this:

const onSubmit = async () => {
console.log(searchCases);
//  handleFormChange();
try {
  await fetch("/api/cases/create_search", {
    method: "POST",
    headers: {
      Accept: "application/json",

      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      searchCases,
    }),
  }).then(response => {
      let byteArray = response;
      let data = byteArray;
      setNewData(data);
      console.log(data);
    }
  );
} catch (e) {
  console.error(
    'Error: An error was detected in the function "fetch" /api/cases/create_search_case OR in msgpk:',
    e
  );
}