如何解决 React Hook useEffect has missing dependencies 错误？答案

【问题标题】：How to solve React Hook useEffect has missing dependencies error?如何解决 React Hook useEffect has missing dependencies 错误？
【发布时间】：2021-11-23 20:24:14
【问题描述】：

如何解决 第 31:6 行：React Hook useEffect 缺少依赖项：'fetchUserName' 和 'history'。要么包含它们，要么删除依赖数组 react-hooks/exhaustive-deps ？我无法解决它。我正在使用 Firebase 进行身份验证。请帮帮我！！！！！！

import React, { useEffect, useState } from "react";
import { useAuthState } from "react-firebase-hooks/auth";
import { useHistory } from "react-router";
import "./Dashboard.css";
import { auth, db, logout } from "./firebase";

function Dashboard() {
  const [user, loading] = useAuthState(auth);
  const [name, setName] = useState("");
  const history = useHistory();

  const fetchUserName = async () => {
    try {
      const query = await db
        .collection("users")
        .where("uid", "==", user?.uid)
        .get();
      const data = await query.docs[0].data();
      setName(data.name);
    } catch (err) {
      console.error(err);
      alert("An error occured while fetching user data");
    }
  };

  useEffect(() => {
    if (loading) return;
    if (!user) return history.replace("/");

    fetchUserName();
  }, [user, loading]);

  return (
    <div className="dashboard">
      <div className="dashboard__container">
        Logged in as
        <div>{name}</div>
        <div>{user?.email}</div>
        <button className="dashboard__btn" onClick={logout}>
          Logout
        </button>
      </div>
    </div>
  );
}

export default Dashboard;

【问题讨论】：

在您的 fetchUserName 函数中，您正在对未包含在 useEffect 函数依赖项中的用户名进行状态更改。将名称添加到您的依赖项列表中，这应该可以解决警告。另外，我建议阅读此 reactjs.org/docs/…> 以更好地了解 useEffect 的最佳实践

标签： javascript reactjs async-await firebase-authentication react-hooks

【解决方案1】：

通常在 useEffect 的末尾添加 'fetchUserName' 和 'history' 到数组中应该没问题：

useEffect(() => {
  if (loading) return;
  if (!user) return history.replace("/");

  fetchUserName();
}, [
  user, 
  loading,
  fetchUserName,
  history
]);

【讨论】：

【解决方案2】：

React 函数式组件使用闭包。
当状态更新时，并非所有函数都知道更新的值，它们只知道初始化的值

当你使用useEffect时，你需要确保useEffect钩子知道更新的值，甚至useEffect调用的函数也需要知道更新的值所以如果你有一个警告说你缺少一些依赖项，你可能需要听它

如果您真的不需要它并且想要删除警告，您可以将它放在 useEffect/useCallback 结束之前

        // eslint-disable-next-line react-hooks/exhaustive-deps

但他们又不是错误地发送了这个，他们发送它是有原因的，而且是好的

【讨论】：

【解决方案3】：

你可以用这个

useEffect(() => {
    if (loading) return;
    if (!user) return history.replace("/");

    fetchUserName();
    // eslint-disable-next-line
  }, [user, loading]);

【讨论】：