Reflect changes without page refresh-CodePudding

I have created method to delete image as

action.js

export const removeImage = (id, image_id) => async () => {
  try {
    const response = await axios.delete(
      `localhost:3000//api/v1/posts/${id}/delete/${image_id}`,
      {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      },
    )

I have call this method in post/[id].js as

<p onClick={() => removeImage(id, imgae.id)}>delete </p>

The problem is when I delete image I should hard refresh page to see changes. How can I solve this. Thanks in advance

CodePudding user response：

I think that you try to do two different things : Delete the image on your server with a request Hide the image from your component / refresh your component src

You need to make the source image property of your component more reactive, like putting it in the state so you can modify it dynamically

Because here, you simply delete the resource on your server but your component is not refreshed or reloaded.

What you shoud do is to hide your component holding the image and display a kind of placeholder after clicking your delete button

CodePudding user response：

Unless your app watches the server for updates you should manually reflect the changes you do on the server in your UI as well. For example, if you have a component, say an ImageButton, that is showing your image, and you remove the image from the server, what is the intended behavior? If you want the image button removed, you can simply set it’s visible property to false.