如何解决“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()
    },[])