如何避免 useEffect 内部的无限循环与 dispatch() 一起工作？

Question

我正在做一个项目，其中有一个包含多个属性的列表。每个属性都有名称、纬度、经度等数据。

在屏幕的一侧，我呈现显示属性名称的列表。在屏幕的另一边，在地图内部，我渲染了一些标记，这些标记相当于每个属性的经纬度。

当我在我的地图上移动时，我希望它显示带有要更改的属性名称的列表的组件，仅显示地图可见区域内的属性。 （与 airbnb 和其他类似平台已经运行的方式相同，当我移动地图或放大时，属性列表会更新）

我在 useEffect 中执行此更新，但我返回以下错误当我移动地图：

超过最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，就会发生这种情况。 React 限制嵌套更新的数量以防止无限循环。

这是我的

code

：

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { setProperties } from "../../store/StoreInfo";

const Properties = () => {
  const dispatch = useDispatch();
  const dataProperties = useSelector((state) => state.storeInfo.dataProperties);
  const mapMoveEnd = useSelector((state) => state.storeInfo.mapMoveEnd);

  React.useEffect(() => {
    if (mapMoveEnd && dataProperties) {
      const _response = dataProperties.filter((accommodation) => {
        return mapMoveEnd
          .getBounds()
          .contains([accommodation.latitude, accommodation.longitude]);
      });
      dispatch(setProperties(_response));
    }
  }, [mapMoveEnd, dispatch, dataProperties]);

  return (
    <div>
      {dataProperties &&
        dataProperties.map((property, index) => (
          <div
            style={{
              display: "flex",
              padding: "10px",
              borderBottom: "1px solid gray"
            }}
            key={`index_${index}`}
          >
            <h3>Name: {property.name}</h3>
          </div>
        ))}
    </div>
  );
};

export default Properties;

我将我的项目放入 codesandbox.io，因为它更容易理解组件的通信方式。如果您打开链接，您会看到移动地图时，之后会出现错误。

提前感谢您的帮助！！！

Answer 1

看起来对 useEffect 的依赖顺序是问题，但不确定。

你能尝试按以下顺序使用它吗

[mapMoveEnd, dataProperties, dispatch]

这是因为如果您以不同的顺序列出依赖项，React 可能无法确定特定值是否已更改。

Answer 2

React.useEffect(() => {
if (mapMoveEnd && dataProperties) {
  const _response = dataProperties.filter((accommodation) => {
    return mapMoveEnd
      .getBounds()
      .contains([accommodation.latitude, accommodation.longitude]);
  });
  dispatch(setProperties(_response));
}
}, [mapMoveEnd, dispatch, dataProperties]);

您的依赖项包含在

dispatch(setProperties(_response));

中更改的数据属性。这就是它无限循环的原因。 如何使用

useMemo

  const da = useMemo(() => {
let _response = dataProperties;
if (mapMoveEnd && dataProperties) {
  _response = dataProperties.filter((accommodation) => {
    return mapMoveEnd
      .getBounds()
      .contains([accommodation.latitude, accommodation.longitude]);
  });
}
return _response;
}, [dataProperties, mapMoveEnd]);

我试过了，成功了。你可以自己试试。祝你有美好的一天！

Answer 3

当组件在 useEffect 中重复调用 setState 时，可能会发生这种情况。由于依赖性，它会创建无限循环。 从 useEffect 中删除依赖项，它将以完美的方式工作。

尝试以下附加代码：

 React.useEffect(() => {
    if (mapMoveEnd && dataProperties) {
      const _response = dataProperties.filter((accommodation) => {
        return mapMoveEnd
          .getBounds()
          .contains([accommodation.latitude, accommodation.longitude]);
      });
      dispatch(setProperties(_response));
    }
  }, [dataProperties]);