我正在做一个项目，我有一个列表，其中有几个属性。每个属性都有数据，如名称，纬度，经度，等等。
在屏幕的一侧，我绘制了显示属性名称的列表，在屏幕的另一侧，在Map内部，我绘制了一些标记，这些标记相当于每个属性的纬度和经度。
当我在Map上移动时，我希望显示属性名称列表的组件发生变化，只显示Map可见区域内的属性。（与airbnb和其他类似平台的工作方式相同，当我移动Map或放大Map时，属性列表也会更新）
我在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中，因为这样更容易理解组件之间的通信方式。如果你打开链接，你会看到当移动Map时，错误随后出现。
提前感谢您的任何帮助!!!