React中useEffect获取数据后外部访问返回undefined问题排查

嘿，这个问题我太熟啦！你遇到的是React useState的异步更新特性导致的，咱们一步步拆解：

为什么会出现undefined？ #

1. useState更新是异步的：你调用setAccountInfos(fetchedAccountInfos)后，React并不会立刻更新accountInfos的状态值——为了优化性能，React会批量处理状态更新，等合适的时机才会把新状态应用到组件上。所以你在set之后马上console.log(accountInfos)，拿到的还是初始的undefined。

2. 组件渲染时机的问题：组件外部的console.log(accountInfos)会在组件第一次渲染时执行，这时候accountInfos还没被赋值（初始就是undefined）。当useEffect里的异步请求完成、调用setAccountInfos后，组件会重新渲染，但那个外部的console.log已经在第一次渲染时跑完了，所以你看到的还是旧值。

怎么解决？ #

方案1：直接用刚获取到的变量 #

如果你在runEffect函数里需要用最新的数据，直接用fetchedAccountInfos就行，不用等setAccountInfos更新状态：

(async function runEffect() {
  const fetchedAccountInfos = await fetchAccountInfos();
  if (fetchedAccountInfos && fetchedAccountInfos.length > 0) {
    console.log(fetchedAccountInfos); // 这里是最新数据
    setAccountInfos(fetchedAccountInfos);
    setLoading(false);
    // 要处理数据的话直接用fetchedAccountInfos，别用accountInfos
  } else {
    setError("Accountdaten können nicht geladen werden!");
    setLoading(false);
  };
})();

方案2：用useEffect监听状态变化 #

如果需要在accountInfos更新完成后执行操作，比如打印、处理数据，可以新增一个useEffect监听它的变化：

useEffect(() => {
  if (accountInfos) {
    console.log(accountInfos); // 这里能拿到更新后的最新值
    // 其他需要用新状态的逻辑也可以放在这里
  }
}, [accountInfos]); // 依赖数组里加入accountInfos，状态变化时自动触发

这样就能准确拿到更新后的状态值啦～

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