为什么我的 useEffect 在 localhost 上运行但在生产环境中不起作用？

Question

我在我的 app.jsx 中使用以下逻辑来检查 accessToken，如果不存在，那么我想运行 useRefreshToken 突变以借助存储为 httpOnly 和安全标志的存储的 refreshToken cookie 获取新的 accessToken。

我在我的开发中成功运行了代码，并且所有步骤都按预期工作，并在所有步骤中使用 console.logs 检查。

const [persist] = usePersist()
const token = useSelector(selectCurrentToken)
const effectRan = useRef(false)
const [trueSuccess, setTrueSuccess] = useState(false)

const [refresh, {
    isUninitialized,
    isLoading,
    isSuccess,
    isError,
    error
}] = useRefreshMutation()

useEffect(() => {
    console.log('verifying refresh token useffect running', token, persist)

    if (effectRan.current === true) {
        console.log('verifying refresh token effectRan.current')

        const verifyRefreshToken = async () => {
            console.log('verifying refresh token tryCatch running')
            try {
                await refresh()
                setTrueSuccess(true)
            }
            catch (err) {
                console.error(err)
            }
        }
     if (!token && persist) verifyRefreshToken()
     }

     return () => {
     console.log("EffectRan: ", effectRan.current, token, persist)
     effectRan.current = true
     console.log("EffectRan: ", effectRan.current)
     }
}, [])

但是，当我在“npm run build”之后部署应用程序时，只有第一个 console.log 运行，表明 useeffect 正在运行，但清理功能中的 console.logs 不运行。 我真的很生气，因为我被困了 10 多天。 我无法接受为什么代码在本地主机上运行良好，但在部署时却不行。 我真的很感激任何帮助。

Answer 1

您的useEffect仅在 清理 function 中将effectRan.current设置为true 。

useEffect(() => {
  if (effectRan.current === true) {
    // your logic
  }

  return () => {
    effectRan.current = true;
  };
}, []);

它只能在开发模式下工作的事实是因为useEffect会因为StrictMode而在 mount 上运行两次。 因此，当组件第一次卸载时effectRan.current将设置为true ，然后当它再次安装时effectRan.current为true 。

在生产中 StrictMode 被禁用，因此不会触发useEffect两次。

相反，你可以做这样的事情

useEffect(() => {
  if (effectRan.current === true) return;

  effectRan.current = true;
  // your logic
}, []);