如何解決“useEffect 缺少依賴項”？

Question

我正在創建一個項目，其中的數據是從 Firebase 獲取的，整個 UI 工作正常，但出現錯誤

Compiled with warnings.

src/Myproject.js
  Line 16:7:  React Hook useEffect has a missing dependency: 'fetchDB'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

但是如果我們看到代碼

// Code...
const [allProjects,getAllProjects] = useState([
        {
            coverImg: null,
            dateOfpublish: "--/08/2021",
            demo: null,
            summary: "To showcase my skills",
            tag: "react",
            title: "Portfolio"
        }])
    const fetchDB =  async() =>{
        const getdata = db.collection('projects');
        const data = await getdata.get();
        data.docs.forEach(project=>{
            getAllProjects([...allProjects,project.data()])
        })
    }
    useEffect(()=>{
        fetchDB();
    },[])
// Code...

我找不到哪里出錯了...

這個問題與這個問題密切相關，但給出的解決方案仍然沒有解決我的問題。

完整代碼在Github上

Answer 1

您收到此錯誤是因為 fetchDB function 將創建每個渲染器，並且 React 試圖警告您 fetchDB 是否已更改 useEffect 不會在更改后觸發。

有兩種方法可以防止這種情況。 首先，您可以像這樣在 useEffect 中創建 fetchDB function。

    useEffect(()=>{
      const fetchDB =  async() =>{
        const getdata = db.collection('projects');
        const data = await getdata.get();
        console.log(data)
        data.docs.forEach(project=>{
            getAllProjects([...allProjects,project.data()])
      })
    }
      fetchDB();
    },[])

另一方面，您可以使用 useCallback 鈎子來防止在每個帶有記憶的渲染上創建 fetchDB

 const fetchDB =  useCallback(() => {
    async() =>{
        const getdata = db.collection('projects');
        const data = await getdata.get();
        console.log(data)
        data.docs.forEach(project=>{
            getAllProjects([...allProjects,project.data()])
        })
    }
}, [])

 useEffect(()=>{
    fetchDB();
 },[fetchDB])

Answer 2

我會嘗試

const [allProjects,getAllProjects] = useState([])
    const fetchDB =  async() =>{
        const getdata = db.collection('projects');
        const data = await getdata.get();
        console.log(data)
        data.docs.forEach(project=>{
            getAllProjects([...allProjects,project.data()])
        })
    }
    useEffect(()=>{
        fetchDB();
    },[fetchDB()])

我也會重命名

const [allProjects,getAllProjects] = useState([])

經過

const [allProjects, setAllProjects] = useState([])
Or
const [projects, setProjects] = useState([])

在您的 GitHub 上，每個人都可以訪問您的 api 密鑰和憑據。 您應該將敏感信息存儲在 .env 或 .env.local 文件中，並將此文件添加到您的 gitignore。

Answer 3

在我找到解決方案之前，這個錯誤讓我困擾了好幾天

 const fetchDB =  useCallback(async () => {
        const getdata = db.collection('projects');
        const data = await getdata.get();
        data.docs.forEach(project=>{
            getAllProjects([...allProjects,project.data()])
        })
}, [getAllProjects, allProjects])

 useEffect(()=>{
    fetchDB();
 },[fetchDB])

Answer 4

我通過在加載時添加 EventListener 解決了這個問題

const [allProjects,getAllProjects] = useState([]);
    const fetchDB = () =>{
        db.collection("projects").get().then((querySnapshot) => {
            querySnapshot.forEach(element => {
                var data = element.data();
                getAllProjects(arr => [...arr,data]);
                console.log("is called")
            });
        });
    };
    useEffect(()=>{
        fetchDB()
    },[])