与Firebase结合使用React Hook UseEffect创建无限循环

Question

我正在开发一个使用Firebase和React挂钩的项目。 在加载Web应用程序之前，我想通过运行查询来从Firebase获取所有数据，如下所示。

const [lists, setLists] = useState([]);

useEffect(() => {
  const dataArray = [];
  /** handleWidgets */
  listsRef
    .once('value', snap => {
      snap.forEach(function(result) {
        firebase
          .database()
          .ref('lists')
          .child(result.key)
          .on('value', snap => {
            if (snap.val()) dataArray.push(snap.val());
          });
      });
    })
    .then(function() {
      setLists(dataArray);
    });
}, [lists]);

由于某种原因，useEffect始终在运行，并造成了巨大的性能问题。 是否有更好的方法将Firebase查询与诸如useEffect之类的React Hooks一起使用？ 现在，如果列表已更改，则useEffect始终在运行。

Answer 1

更新：

有两件事：

1）您的useEffect订阅了在useEffect中设置的lists ，因此它触发了重新运行。

2）您尝试更新项目，然后重新获取所有数据，包括更新的项目。 您不需要这样做。 从Firebase获得“初始状态”后，状态中的该列表可能会发生所有修改。 是的，您会打电话进行添加/更新/删除操作，但是您不必每次都打电话来获得一个全新的列表，因为您知道自己更改了哪些信息，并且只需更新状态列表即可反映出这一点。同时还调用以实际更新基础数据，以便当您从Firebase导航离开列表时，该列表会反映状态中的列表。

所以！

从[]末尾删除lists ，以便您的代码仅在安装时运行，如下所示：

const [lists, setLists] = useState([]);

useEffect(() => {
  const dataArray = [];
  /** handleWidgets */
  listsRef
    .once('value', snap => {
      snap.forEach(function(result) {
        firebase
          .database()
          .ref('lists')
          .child(result.key)
          .once('value', snap => {
            if (snap.val()) dataArray.push(snap.val());
          });
      });
    })
    .then(function() {
      setLists(dataArray);
    });
}, []); // removed lists from subscription []

然后，假设在add方法中，它看起来类似于以下内容：

addItem = listItem => {
    // make copy of array in state
    const newLists = [...lists];

    // add item to list
    newLists.push(listItem);

    // update list in DB with firebase
    /* firebase call here with new list item */

    // update state lists with new array that has new item
    setLists(newLists)
}

等等，从更新/删除方法等等。 您将只使用该状态值，而无需调用Firebase获取更新列表，因为您已经拥有了它。