Redux读取localStorage速度慢导致useEffect先于其初始化执行首次请求失败

问题根因 #

你代码的核心错误出在Redux切片的localStorage默认值赋值逻辑：localStorage.setItem() 方法无返回值，首次访问时localStorage.getItem('language')返回null，会执行后续的setItem操作，最终localLanguage变量拿到的是undefined，导致Redux初始状态的language.value是无效值，首次请求参数异常。刷新页面后getItem能拿到之前存储的有效值，所以请求恢复正常。

修复方案 #

1. 修正切片初始化逻辑 #

将language切片（view切片逻辑完全一致，同步修改即可）的默认值赋值逻辑调整为以下写法，确保首次访问时也能拿到正确的默认值：

// 替换原有localLanguage赋值逻辑
let localLanguage = localStorage.getItem('language')
if (!localLanguage) {
  localLanguage = 'English'
  localStorage.setItem('language', localLanguage)
}

2. 为useEffect增加参数有效性校验 #

避免参数未初始化完成时发起无效请求：

useEffect(() => {
  // 仅当两个参数都有有效值时触发请求
  if (view && language) {
    getData(`${view}_${language}`);
  }
}, [view, language])

可选优化 #

如果你的应用有更多依赖localStorage的初始化逻辑，可以在根组件加一个全局初始化状态，所有依赖本地存储的业务逻辑都等初始化完成后再执行，避免同类问题出现。

内容的提问来源于stack exchange，提问作者jerek.orlin