You need to enable JavaScript to run this app. useEffect中async/await写法try块内变量为undefined,改用Promise则正常
优惠活动
大模型
产品
解决方案
定价
更多

useEffect中async/await写法try块内变量为undefined,改用Promise则正常

问题产生原因

核心问题是变量名重复导致的块级作用域屏蔽+暂时性死区,和zustand持久化、Next.js本身没有关联:

  1. 你在async/await写法的try块内部,写了const { returnedData: someData, someOtherReturnedData } = response的逻辑,相当于在try这个块级作用域内,重新声明了一个和外层同名的someData变量。
  2. JS中let/const声明的变量存在「变量提升」,但会进入暂时性死区:变量声明会被提升到当前块级作用域的顶部,但在实际赋值语句执行前,访问该变量都会返回undefined。你在try块开头打印someData的时候,内层声明的someData已经覆盖了外层的同名变量,但还没有执行到赋值语句,所以打印结果是undefined。
  3. 为什么Promise链式调用写法正常?因为你调用get请求、拼接url时还没进入.then的作用域,访问的是外层的someData;而.then内部的同名someData声明只在.then的块级作用域内生效,不会影响到请求发送阶段的取值。
解决方法
  • 首先修改try块内解构的变量名,不要和外层的someData重名,避免作用域屏蔽:
// 把解构赋值的别名改成其他名称即可
const { returnedData: newSomeData, someOtherReturnedData } = response
setDataInSessionStore({
  someData: newSomeData,
  someOtherReturnedData,
})
  • 修正useEffect的不规范写法:
    1. 不要直接把async函数传给useEffect,因为useEffect期望返回值是清理函数或者undefined,async函数返回的Promise会导致React运行警告。正确写法是在useEffect内部声明async函数再调用。
    2. 补全useEffect的依赖数组,把用到的外部变量(如someData、router、setDataInSessionStore等)加入依赖,避免闭包陷阱。

修正后的代码示例:

useEffect(() => {
  const fetchData = async () => {
    if (!someData) return
    try {
      console.log('inside try block', someData) // 现在会正常打印外层的someData值
      const response = await get(apiUrl('urlInObject') + `${someData}`, {
        someData,
      })
      // 修改变量名避免重名
      const { returnedData: newSomeData, someOtherReturnedData } = response
      setDataInSessionStore({
        someData: newSomeData,
        someOtherReturnedData,
      })
      showNotification({
        type: 'success',
        message: `The operation was successful.`,
      })
      router.push('/pages/other-page')
    } catch (error) {
      if (error.code === 400) {
        showNotification({ message: `${error.data}` })
      }
      if (error.code === 404) {
        showNotification({
          message: `'${someData}' is not valid. Please try again.`,
        })
        router.push('/pages/different-page')
      }
      console.error('ERROR: ', error)
    }
  }
  fetchData()
}, [someData, router, setDataInSessionStore, showNotification])

内容的提问来源于stack exchange,提问作者Tara

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.20 05:45:03