React useEffect本地正常 Netlify生产环境不触发问题排查

你的问题和Netlify生产环境无关，核心是useEffect写法错误，把接口请求逻辑写在了effect的清理函数中：

• useEffect回调中return返回的函数是组件清理函数，仅会在组件卸载、或effect依赖更新触发重跑前执行，组件首次挂载完成时不会运行该函数。
• 本地开发环境运行正常是因为Vite默认开启的React.StrictMode在开发模式下会自动执行「组件挂载→卸载→重新挂载」的模拟流程，用于提前暴露代码问题，这个流程会触发一次清理函数执行，刚好误打误撞运行了你写在return里的账户确认请求，造成本地逻辑正常的假象。
• 生产环境构建后React.StrictMode不会执行这套双挂载模拟，组件首次加载时只会运行useEffect回调的主体逻辑，不会执行你return里的请求方法，因此不会发起接口请求，页面一直卡在loading状态，也不会有任何报错输出。

将confirmAccount的调用从return的清理函数中移出，直接放在useEffect回调主体内执行即可，没有清理需求时可以省略return语句：

useEffect(() => {
  const confirmAccount = async ()=> {
    try {
      const response = await fetch(url);
      const result = await response.json();
      if (!response.ok){
        throw new Error(result.msg);
      }
      setConfirmedAccount(true)
      setAlert({msg: result.msg, error1: false})
    } catch (error) {
      setAlert({msg: error.message, error1: true})
    }
    setLoading(false);
  }
  // 组件挂载完成后直接执行确认请求
  confirmAccount();

  // 无清理需求可以不写return，需要的话可以在这里加请求中断等逻辑
}, [])

修复后重新部署前，请确认你在Netlify的站点配置中已经正确添加了VITE_BACKEND_URL环境变量，Vite只会在构建时读取以VITE_开头的环境变量打入生产包，未配置的话会导致接口请求地址异常。

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