React Hook useEffect依赖报错排查：网站正常但控制台提示错误

你遇到的两个ESLint报错，根源是react-hooks/exhaustive-deps规则对依赖数组的严格要求：

• 禁止在依赖数组中使用复杂表达式（比如auth?.token这类可选链语法）
• 要求明确声明所有在useEffect内部用到的依赖项

修复步骤 #

1. 提取复杂表达式为单独变量：把auth?.token提取成独立的token变量，让ESLint能静态分析它的变化
2. 更新useEffect的依赖数组：用提取后的token代替原来的auth?.token

修改后的代码 #

import { useState, useEffect } from "react";
import { useAuth } from "../../../context/auth";
import { Outlet } from "react-router-dom";
import axios from "axios";
import Spinner from "../../spinner";

export default function PrivateRoute() {
  const [ok, setOk] = useState(false);
  const [auth] = useAuth();
  // 提取token为单独变量，方便ESLint静态检查
  const token = auth?.token;

  useEffect(() => {
    const authCheck = async () => {
      const res = await axios.get("/api/v1/auth/user-auth");
      setOk(res.data.ok); // 简化条件判断，逻辑与原代码一致
    };
    if (token) authCheck();
  }, [token]); // 依赖数组使用提取后的token变量

  return ok ? <Outlet /> : <Spinner />;
}

额外说明 #

• 提取变量后，ESLint能准确识别依赖项的变化，既不会漏触发useEffect，也能避免不必要的重复执行
• 网站功能正常是因为当前auth.token的变化未影响现有逻辑，但控制台警告会干扰开发体验，修复后即可消除

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