React中如何确保localStorage与state设置完成后再执行getData函数

问题根因 #

React 中setState是批量异步更新的，你在空依赖的useEffect中调用setLanguage、setView后，当前闭包内的view和language还是初始的null值，不会立刻更新，因此传给getData的参数自然是无效的，和你是否使用async处理没有关联。

解决方案 #

方案1：直接用实际值拼接参数（最简洁，推荐） #

localStorage的读写是同步操作，写入后可以立刻读取到值，你完全不用等state更新，直接用实际生效的配置值拼接参数即可：

useEffect(() => {
  (async function () {
    try {
      // 先处理语言配置
      let currentLang = localStorage.getItem('language')
      if (currentLang === null) {
        currentLang = 'en'
        localStorage.setItem('language', currentLang);
        setLanguage(currentLang)
      }

      // 再处理视图配置
      let currentView = localStorage.getItem('view')
      if (currentView === null) {
        currentView = 'verses'
        localStorage.setItem('view', currentView);
        setView(currentView);
      }

      // 直接用已确认有效值拼接参数
      getData(`${currentView}_${currentLang}`);

    } catch (e) {
      console.error(e);
    }
  })();
}, []);

方案2：拆分useEffect监听state变化 #

如果你确实需要依赖state的值触发拉取，可以拆分逻辑为两个useEffect，分别处理初始化和数据拉取：

// 第一个useEffect：初始化本地存储和state
useEffect(() => {
  const savedLang = localStorage.getItem('language')
  if (savedLang === null) {
    localStorage.setItem('language', 'en');
    setLanguage('en')
  } else {
    setLanguage(savedLang)
  }

  const savedView = localStorage.getItem('view')
  if (savedView === null) {
    localStorage.setItem('view', 'verses');
    setView('verses');
  } else {
    setView(savedView)
  }
}, []);

// 第二个useEffect：监听两个配置state，都有有效值时再拉取数据
useEffect(() => {
  if (view && language) {
    getData(`${view}_${language}`);
  }
}, [view, language]);

额外优化建议 #

你可以在state初始化时直接读取localStorage的值，省去初始化阶段的判断逻辑：

const [view, setView] = useState(localStorage.getItem('view') || 'verses');
const [language, setLanguage] = useState(localStorage.getItem('language') || 'en');
const [content, setContent] = useState(null);

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