Question

我正在构建Redux应用程序，加载特定组件后，我需要数据库中的数据才能存储在Redux存储中。但是，我需要每次用户添加新数据时都发生这种情况。当前，我可以通过将一个空的依赖项数组传递给我的效果来使数据最初加载，但这会阻止数据根据用户操作进行更新（您必须刷新页面才能使效果再次运行）。但是，如果将数据添加到依赖项数组中，则会导致无限循环，因为这样会改变依赖项数组中正在监视的数据。下面是我的代码的当前流程。

useEffect从MarkerList组件调度操作。
Redux操作从Firestore检索数据并将操作分派给reducer。
Reducer使用Firestore中的有效负载更新状态。

我不知道如何在每次添加新标记时正确触发我的效果。如果由于无限循环而无法在依赖项数组中跟踪数据，我应该如何监视数据更改并重新触发效果？

我尝试设置一个Firestore onSnapshot侦听器，但是在redux上效果不佳。我曾尝试使用一个空的依赖项数组，如前所述，它第一次可以正确获取数据，但是在添加新数据而不刷新页面时不会更新我的用户界面。显然，跟踪依赖项数组中的标记会导致无限循环。

组件中的效果

useEffect(() => {
  const loadMarkers = async () => {
    props.loadMarkers();
  };
  loadMarkers();
}, []);

Redux动作

export function loadMarkers() {
  let markers = [];
  return dispatch => {
    getMarkersFromDB().then(snap => {
      snap.forEach(doc => {
        markers.push(doc.data());
      });
      dispatch({
        type: constants.LOAD_MARKERS,
        payload: markers
      });
    });
  };
}

Answer 1

我想我明白了。我非常想知道如何使效果处理所有数据操作，所以我不认为只是从向数据库添加标记的函数中再次调用loadMarkers。 CreateMarker组件是单独的，因此我将其连接到redux并将loadMarkers操作传递给它。现在，我的MarkerList仍在装入时加载初始数据，但是每当用户创建新标记时，CreateMarker组件也会分派loadMarkers操作。现在一切正常。

感谢Azundo，与您交谈使我意识到我是近视的。

在这种情况下如何避免useEffect中的无限循环

1 个答案: