KeplerGl React添加Supabase数据时图层重复问题求助

问题原因 #

1. 三个数据添加组件（AddDataToMap/AddPoints/AddMonitoringDeviceStatus）的useEffect无依赖项，组件重复渲染时会重复触发addDataToMap请求；
2. 数据集ID未做区分（代码中统一用my_data），且未配置替换逻辑，KeplerGl会将每次请求都视为新数据集创建图层；
3. fetch未做异步处理，直接传递Promise给processGeojson会导致数据无效，可能触发异常重复请求。

解决方案 #

1. 给每个数据集设置唯一ID + 开启替换模式 #

每个组件的数据集ID必须唯一，同时在options中添加replace: true，让KeplerGl识别为更新现有图层而非新增：

// AddDataToMap.js
const AddDataToMap = () => {
  useEffect(() => {
    const loadData = async () => {
      // 修复fetch异步处理逻辑
      const res = await fetch('from/some/endpoint');
      const rawData = await res.json();

      const geojson = {
        datasets: {
          info: { id: 'layer-main-data' }, // 唯一ID，与其他组件区分开
          data: processGeojson(rawData)
        },
        options: {
          keepExistingConfig: true,
          replace: true // 替换同名ID的数据集，避免生成重复图层
        }
      };

      dispatch(addDataToMap(geojson));
    };

    loadData();
  }, []); // 空依赖数组，仅组件挂载时执行一次

  return null;
};

AddPoints和AddMonitoringDeviceStatus同理，分别设置唯一ID（比如layer-points、layer-device-status）。

2. 避免组件不必要重渲染 #

用React.memo包裹数据添加组件，防止父组件（Map）重渲染时重复触发数据添加逻辑：

import { memo } from 'react';

const AddDataToMap = memo(() => {
  // 内部逻辑不变
});

const AddPoints = memo(() => {
  // 内部逻辑不变
});

const AddMonitoringDeviceStatus = memo(() => {
  // 内部逻辑不变
});

3. 动态更新数据的处理（如需定时刷新） #

如果需要定时更新数据，给useEffect添加刷新触发依赖（比如时间戳），依然使用相同ID+replace: true来更新图层：

const AddDataToMap = memo(() => {
  const [refreshTs, setRefreshTs] = useState(Date.now());

  // 示例：每30秒刷新一次数据
  useEffect(() => {
    const timer = setInterval(() => setRefreshTs(Date.now()), 30000);
    return () => clearInterval(timer);
  }, []);

  useEffect(() => {
    const loadData = async () => {
      const res = await fetch('from/some/endpoint');
      const rawData = await res.json();

      const geojson = {
        datasets: {
          info: { id: 'layer-main-data' },
          data: processGeojson(rawData)
        },
        options: {
          keepExistingConfig: true,
          replace: true
        }
      };

      dispatch(addDataToMap(geojson));
    };

    loadData();
  }, [refreshTs]); // 刷新时间戳变化时触发数据更新

  return null;
});

内容的提问来源于stack exchange，提问作者isaac