useEffect中使用useState更新状态不生效，status始终为初始值pending

• 第一步：验证请求回调是否正常执行
  你当前的代码没有错误捕获逻辑，也没有验证回调是否触发，首先调整代码确认then回调确实被执行：

useEffect(() => {
  async function getStatus() {
    await axios
      .get('api')
      .then(res => {
        // 这里如果能打印说明回调正常执行
        console.log('请求成功，准备修改状态')
        setStatus('on hold')
      })
      .catch(err => {
        // 打印报错排查隐式异常，比如响应拦截器抛出错误、跨域等问题
        console.error('请求异常', err)
      })
  }
  getStatus();
}, []);

• 第二步：排查组件提前卸载问题
  如果请求返回前组件就被路由切换、条件渲染等逻辑卸载，React会直接忽略未挂载组件的setState调用，不会触发状态更新也不会报错，添加挂载标记验证：

useEffect(() => {
  let mountedFlag = true
  async function getStatus() {
    await axios
      .get('api')
      .then(res => {
        if (mountedFlag) {
          setStatus('on hold')
        } else {
          console.log('状态更新时组件已卸载')
        }
      })
  }
  getStatus();
  return () => {
    mountedFlag = false
  }
}, []);

• 第三步：排查状态被覆盖的逻辑
  全局搜索组件内所有setStatus调用位置，确认没有其他逻辑（比如其他useEffect、事件回调）在接口请求完成后，把status重新改回了初始值pending。
• 第四步：优化异步写法
  不要混合使用await和.then两种异步处理语法，统一用try/await写法避免回调执行逻辑异常：

useEffect(() => {
  let mountedFlag = true
  async function getStatus() {
    try {
      const res = await axios.get('api')
      if (mountedFlag) {
        setStatus('on hold')
      }
    } catch (err) {
      console.error('请求异常', err)
    }
  }
  getStatus();
  return () => {
    mountedFlag = false
  }
}, []);

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