When I change image, useState is not changed

Viewed 19

I have a problem with uploading an image. I have cards and all cards have an image. When I clicked Update Product, Card Details page is opening.

enter image description here

After I click this image, I choose another picture, the photo changes in Front, and when I clicked submit API gives me success and the correct photo URL. enter image description here

But when I submitted this form, I returned all cards page ( with history.push()), the image was not changed. If I clicked empty cache and hard reload in my browser after the new image was changed. I tried to fix and first of all, I looked network and the response gave me the correct link, I opened a new tab and put the link and a new image opened. Maybe the link between old and new images is the same and useState is not working. Api gives a new link, useState gives the old link. Both links are the same.

I tried window.location.reload(true), but it did not work first uploading. After first cleaning the cache, the image was uploaded, and after the second uploading, it worked without cleaning the cache.

My codes

It is for getting one card's data and image

 const [getPhoto, setGetPhoto] = useState();

 useQuery(["PRODUCT_DATA_OVERVIEW_BRANCH", id], () => 
  apiService.getAdminProductDetails(id), {
    onSuccess: (response) => {
      setGetPhoto(response.photoUrl);
    },
  });

Changing data Api

 const { mutate, isLoading } = useMutation(apiService.updateAdminProducts, {
    onSuccess: () => {
      enqueueSnackbar("Product was updated", { variant: "success" });
      history.push("/admin/products");
      window.location.reload(true);
    },
  });

onSubmit

  const onSubmit = () => {
    const urlProductInfo = new URLSearchParams(getProductData);
    let formData = new FormData();
    formData.append("photo", getPhoto);
    mutate({ urlProductInfo, formData });
  };

api

const ApiService = (httpService) => {
   updateAdminProducts: async (variables) => {
      const { urlProductInfo, formData } = variables;
      const response = await httpService.patch(`/product/sme?${urlProductInfo}`, formData);
      return response?.data;
    },
}
0 Answers
Related