前端解决页面已重新加载，但内容没有及时更新的问题

最新推荐文章于 2024-10-31 15:33:18 发布

原创最新推荐文章于 2024-10-31 15:33:18 发布

· 1.6k 阅读

0 ·

版权

文章标签：

#前端 #javascript

导语：在某一作品的详情页中，点击底部 作者的其他作品 里的作品时，能够跳转至新作品的详情页，详情页路由为 /front/detailpage/ + artId 。但是目前的问题是，点击作品后路页面路由改变了，但详情页内容并不刷新

在这里插入图片描述

1. 原因

因为书画详情页路由是动态变化的，但component是同一个。所以页面已重新加载，但内容没有及时更新，是没有正确地处理路由变化时的页面更新的问题

同时我们需要知道：浏览器为了提高网页的访问速度和性能，会在本地缓存已经访问过的资源，包括 HTML、CSS、JavaScript 等文件。当我们重新加载页面时，浏览器会尝试从缓存中读取资源，而不是从服务器重新获取最新的内容。

2. 解决？

通过 window.location.reload() 在页面跳转时强制刷新页面

<div onClick={window.location.reload()}>
  <Link to={{ pathname: '/front/detailpage/' + artData.artId }}>
    <img src={artData.artPath} style={{ width: '270px', height: "180px" }} />
  </Link>
</div>

但是这样就新页面会隔几秒重复刷新

因为 window.location.reload() 这个方法本身需要等待页面加载完成才能执行。如果在页面尚未加载完成的时候调用
reload() 方法，就会出现问题。要避免这种情况，可以尝试在调用 window.location.reload()
方法前添加一个条件语句，确保方法只被调用一次

3. 解决！

可以尝试使用 setTimeout() 函数延迟 window.location.reload() 的执行，但这里我们只需要修改一点就可以，无需再添加新函数

即：将之前的函数改为箭头函数

 onClick={() => {window.location.reload()}}

为什么改为箭头函数就可以了呢

因为箭头函数具有词法作用域（lexical
scoping），它可以在声明时捕获外部的变量和函数，而不是在运行时进行解析。因此，使用箭头函数会延迟
window.location.reload() 的执行，以便页面完全加载完成。