React.js如何在URL后追加随机数解决更新后图片不自动刷新问题

问题根源 #

• 核心是两个原因导致界面没有刷新：
  • 提交更新后没有触发组件重新拉取最新的帖子数据，组件仍在使用更新前缓存的旧数据渲染
  • 图片URL未发生变化时，浏览器命中强缓存直接加载本地存储的旧图片，即使服务器端图片已更新

方案1：按你的需求追加URL随机数实现 #

1. 先修改路由配置，增加可选的随机参数位：

<Route path="/Post-Review/:id/:random?" exact> <Post />  </Route>

2. 修改提交成功后的跳转逻辑，把原来跳首页的逻辑改成跳回带时间戳随机数的帖子详情页：

// 把原来的 history.push("/") 替换为下面的代码
history.push(`/Post-Review/${actualId}/${Date.now()}`)

这个方案会让每次更新后的URL唯一，触发路由组件重新挂载，自动执行初始化时的拉取数据逻辑，就能拿到最新的内容渲染。如果还存在图片缓存问题，只需要在渲染图片的src属性后追加时间戳参数即可：

<img src={`${你的图片地址}?t=${Date.now()}`} alt="帖子封面" />

方案2：无需修改URL的更优实现 #

不需要改动路由，提交成功后主动触发数据刷新即可：

axios.put(`${targetServer}/posts/byId/${actualId}`, formData, {
  // 你的原有请求配置不变
}).then((res) => {
  if (res.data.error) {
    alert(res.data.error);
  } else {
    // 调用页面初始化时拉取帖子详情的接口，更新本地状态
    fetchPostDetail(actualId).then(newPost => {
      setPostObject(newPost) // 更新本地的postObject状态
      // 如果需要留在当前页就不用跳转，需要跳详情页就走正常跳转
      history.push(`/Post-Review/${actualId}`)
    })
  }
})

如果存在图片缓存问题，同样按上面的方法给图片src加动态查询参数即可，参数可以用帖子返回的updatedAt更新时间，比随机数更合理，只有内容更新时才会重新拉取图片。

内容的提问来源于stack exchange，提问作者user16364975