How to use multiple fetchs with POST, DELETE and then GET requests-CodePudding

I have a problem with moving one object on the list to another with fetch when onClick. Firstly I am doing POST request than DELETE and in the end, I use GET to update the state in React. But it is not working well like the state is not updating. How to solve it?

const handleFormAccept = (id: any) => {
        console.log(id);
        fetch(
            `api/forms/${currentUserData.name}/${currentUserData.date}/${currentUserData.email}/${currentUserData.phone}`,
            {
                method: "POST",
            }
        ).then(() =>
            fetch(`api/forms/${id}`, {
                method: "DELETE",
            }).then(() =>
                fetch("api/forms")
                    .then((res) => res.json())
                    .then((data) => {
                        setFormsData(data);
                    })
            )
        );
    };

CodePudding user response：

try using async-await it is now more readable and easy to understand what you are doing I just console the value can set according to that

  const handleFormAccept = async (id: any) => {
    try {
      const postRes = await fetch(
        `api/forms/${currentUserData.name}/${currentUserData.date}/${currentUserData.email}/${currentUserData.phone}`,
        {
          method: 'POST',
        },
      );
      console.log({ postRes });
      const deleteRes = await fetch(`api/forms/${id}`, {
        method: 'DELETE',
      });
      console.log({ deleteRes });

      const getRes = await fetch('api/forms');
      console.log({ getRes });
    } catch (error) {
      console.log(error);
    }
  };