React：useEffect中网络请求后更新状态仍过时的问题求解

你遇到的问题核心在于React的useState更新是异步批量处理的——当你在catch里调用setHasError(true)时，React并不会立刻更新hasError的值，而是会把这个更新操作放入队列，等到当前函数执行完后才会批量处理状态更新。所以在同一个initialize函数里，setHasError之后的console.log(hasError)拿到的还是初始的false，自然会错误触发重定向。

下面给你几个贴合你场景的解决方案，不用引入useReducer也能解决：

方案一：用本地变量暂存错误状态 #

既然我们只是需要在当前initialize函数里判断是否出错，完全可以用一个临时变量来记录，不用依赖组件状态。状态更新只用来给后续UI展示错误用：

const [hasError, setHasError] = useState(false);
useEffect(() => { initialize(); }, []);

async function initialize(){
  let isError = false; // 本地临时变量
  try {
    await networkRequest();
  } catch (err) {
    isError = true;
    setHasError(true); // 更新组件状态给UI用
  }
  console.log(isError); // 这里能拿到正确的true/false
  if(!isError){
    redirect() // 出错时不会触发重定向
  }
}

function networkRequest() {
  return new Promise((resolve, reject) => {
    setTimeout(() => { reject(); }, 1000);
  });
}

这个方案最直接，完全不需要修改useEffect的依赖，也不会重复执行初始化逻辑，完美匹配你的需求。

方案二：直接在Promise的结果分支里处理逻辑 #

既然初始化的逻辑很明确——成功就重定向，失败就设错误状态，那我们可以把重定向逻辑直接放到try块的末尾，失败的逻辑放到catch里，完全不用依赖状态判断：

const [hasError, setHasError] = useState(false);
useEffect(() => { initialize(); }, []);

async function initialize(){
  try {
    await networkRequest();
    redirect(); // 成功直接重定向
  } catch (err) {
    setHasError(true); // 失败只设错误状态，不处理重定向
  }
}

这个方案逻辑更简洁，避免了状态异步更新带来的问题，适合这种初始化时的一次性逻辑。

方案三：用额外状态标记初始化完成（适合复杂场景） #

如果你的后续逻辑确实需要依赖hasError状态来处理，那可以加一个initialized状态来标记初始化是否完成，然后用另一个useEffect来处理重定向：

const [hasError, setHasError] = useState(false);
const [initialized, setInitialized] = useState(false);

useEffect(() => { initialize(); }, []);

// 专门处理初始化完成后的逻辑
useEffect(() => {
  if(initialized && !hasError){
    redirect();
  }
}, [initialized, hasError])

async function initialize(){
  try {
    await networkRequest();
  } catch (err) {
    setHasError(true);
  } finally {
    setInitialized(true); // 无论成功失败，标记初始化完成
  }
}

这个方案适合需要状态驱动多个UI逻辑的复杂场景，但相比前两个稍显繁琐，如果你只是处理初始化后的重定向，前两个方案更合适。

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