反映不刷新页面的更改
反映不刷新页面的更改
提问于 2022-10-15 17:47:31
我已经创建了删除图像的方法，如
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',
},
},
)我在post/id.js中将此方法称为
<p onClick={() => removeImage(id, imgae.id)}>delete </p>问题是，当我删除图像时，我应该硬刷新页面以查看更改。我该怎么解决这个问题。
我用过useEffect钩子
useEffect(()=> {
fetchData();
}, [data]);它工作了，但是负载后端服务器太多了。
我认为使用useState钩子的另一个想法。但是如何在这段代码中实现呢？
提前感谢
回答 2
Stack Overflow用户
发布于 2022-10-15 17:53:30
我认为您尝试做两件不同的事情:使用请求删除服务器上的映像，向组件隐藏映像/刷新组件src。
您需要使组件的源映像属性更具反应性，比如将其置于状态，以便动态地修改它。
因为在这里，您只需删除服务器上的资源，但是组件不会刷新或重新加载。
您应该做的是隐藏您的组件保存图像，并显示一种占位符后，单击您的删除按钮。
Stack Overflow用户
发布于 2022-10-15 17:57:42
除非您的应用程序监视服务器的更新，否则您也应该在UI中手动反映您在服务器上所做的更改。例如，如果您有一个组件，比如一个ImageButton，它显示您的映像，然后从服务器中删除映像，您的预期行为是什么？如果要删除图像按钮，可以简单地将它的visible属性设置为false。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74081754
复制相关文章
相似问题
腾讯云开发者
