Question

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

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

    populateJobs(jobs);
  },[]);

Answer 1

正如 ray 评论的那样，populateJobs 的定义方式确实很重要。但首先，您需要从回调内部调用它：

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

  },[]);

Answer 2

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

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

const populateJobsFixed= useCallback(populateJobs, [])

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

Answer 3

populateJobs 是 useEffect 的依赖

你需要有依赖列表

},[populateJobs]);

代替空数组

Answer 4

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

如果传递一个空数组，它只运行一次，表现得像 componentdidmount 方法

当一个变量被传递时，它会在每次变量值改变时运行。

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

useEffect 修复中的无限循环？

4 个答案: