React Native 远端JSON文件修改后应用内未同步更新问题

核心问题：浏览器静态资源缓存 #

默认情况下浏览器会缓存GET请求的静态JSON资源，就算远端内容修改，后续请求也会直接读取本地缓存的旧内容，不会请求最新数据。
修复方案二选一即可：

• 给请求URL追加动态时间戳参数，让每次请求URL唯一，绕过缓存：

fetch(`${themeStyleOnline}?t=${Date.now()}`)

• 给fetch配置强制不缓存的策略：

fetch(themeStyleOnline, { cache: 'no-store' })

代码其他问题修复 #

1. 修复useEffect死循环问题 #

当前代码的useEffect没有传入依赖数组，会在组件每次重渲染时重复执行，结合回调内修改state的操作会触发无限重渲染。如果仅需要组件挂载时拉取一次配置，传入空依赖数组即可：

useEffect(() => {
  // 原有fetch逻辑
}, [])

如果需要定时同步远端最新配置，可以增加定时器逻辑：

useEffect(() => {
  const fetchTheme = () => {
    fetch(`${themeStyleOnline}?t=${Date.now()}`)
      .then(res => res.json())
      .then(json => setThemeStyle(json))
      .catch(err => alert(err))
  }
  // 组件挂载时先拉取一次
  fetchTheme()
  // 每10分钟同步一次，可按需调整时间间隔
  const timer = setInterval(fetchTheme, 10 * 60 * 1000)
  // 组件卸载时清除定时器避免内存泄漏
  return () => clearInterval(timer)
}, [])

2. 修复日志打印错误 #

useState的更新是异步的，调用setThemeStyle后不会立刻修改当前作用域下的themeStyle2变量，所以finally块内打印的始终是本次渲染周期的旧值。如果要验证返回的最新数据，直接打印接口返回的json即可：

.then(json => {
  setThemeStyle(json)
  console.log("最新获取的statusbar值 >>", json.statusbar)
})

额外优化建议：useState初始值和远端返回的JSON结构保持一致，避免首次渲染访问属性时报错：

const [themeStyle2, setThemeStyle] = useState({
  statusbar: "",
  header: "",
  headertext: "",
  background: "",
  cardbg: "",
  titlebg: "",
  titletext: ""
});

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