useEffect 修复中的无限循环？答案

【问题标题】：Infinite loop in useEffect fix?useEffect 修复中的无限循环？
【发布时间】：2021-06-18 00:44:32
【问题描述】：

我目前正在从 firebase 实时数据库中提取数据，数据将初始填充。但是，当我刷新页面时，内容消失了。我在 UseEffect() 的末尾添加了一个空数组来停止我们遇到的无限循环问题，但它似乎在刷新时停止更新我们的数组。

useEffect(() => {
    let jobs = [];
    firebase.database().ref("1h5GOL1WIfNEOtcxJVFQ0x_bgJxsPN5zJgVJOePmgJOY/Jobs").on("value", snapshot => {
      snapshot.forEach(snap => {
        jobs.push(snap.val());
      });
    })

    populateJobs(jobs);
  },[]);

【问题讨论】：

什么是populateJobs？
const [joblist, populateJobs] = useState([0]);
jobs 只是包含从 firebase 抓取的作业信息的对象
为什么要推出你自己的 firebase 东西有hooks

标签： reactjs firebase firebase-realtime-database

【解决方案1】：

正如 ray 所说，populateJobs 的定义方式确实很重要。但乍一看，您需要从回调内部调用它：

  useEffect(() => {
    firebase.database().ref("1h5GOL1WIfNEOtcxJVFQ0x_bgJxsPN5zJgVJOePmgJOY/Jobs").on("value", snapshot => {
      let jobs = [];
      snapshot.forEach(snap => {
        jobs.push(snap.val());
      });
      populateJobs(jobs);
    })

  },[]);

【讨论】：

天哪，谢谢你的帮助。这解决了一切。感觉像个假人

【解决方案2】：

我假设 populateJobs 是在你的作用域中声明的函数。

如果是这样，您可能需要将其包装在 useCallback 中以确保函数引用不会更改。

const populateJobsFixed= useCallback(populateJobs, [])

useEffect(() => {
    ...
    populateJobsFixed(jobs);
  },[populateJobsFixed]);

【讨论】：

【解决方案3】：

populateJobs 是 useEffect 的依赖项

你需要有依赖列表

},[populateJobs]);

而不是一个空数组

【讨论】：

【解决方案4】：

useEffect(()=>{},[]) 的第二个参数接受一个参数数组，它告诉反应你的回调传递在那里应该运行的更改。

如果传递一个空数组，它只运行一次，行为类似于 componentdidmount 方法

传递一个变量时，每次改变变量的值时都会运行。

此外，如果我们将对象作为第二个参数传递，它也会检查引用更改。

【讨论】：