React切换选择菜单选项后如何清空状态重置地图渲染

核心问题 #

切换选择菜单选项后，组件内部的nextPosition、currentPath状态以及播放定时器没有被重置，导致旧数据的最后一个点和新数据的第一个点被错误连接。

具体修复方案 #

1. 监听数据切换，自动重置状态 #

在ReplayMap组件中添加useEffect，监听props.activityData的变化，一旦数据更新就重置所有相关状态并清理定时器：

useEffect(() => {
  // 重置位置指针和当前路径
  setNextPosition(0);
  setCurrentPath([]);
  setIsPlaying(false);
  // 清理正在运行的定时器
  if (timerRef.current) {
    clearInterval(timerRef.current);
    timerRef.current = null;
  }
}, [props.activityData]);

2. 播放前强制初始化状态 #

修改handlePlay函数，启动播放前先清空旧路径数据，确保从新数据的起点开始绘制：

const handlePlay = () => {
  if (isPlaying) return;
  // 初始化播放状态
  setNextPosition(0);
  setCurrentPath([]);
  setIsPlaying(true);
  
  timerRef.current = setInterval(() => {
    setNextPosition(prev => {
      if (prev >= props.activityData.length - 1) {
        clearInterval(timerRef.current);
        setIsPlaying(false);
        return prev;
      }
      const newPath = [...currentPath, props.activityData[prev]];
      setCurrentPath(newPath);
      return prev + 1;
    });
  }, 100);
};

3. 完善暂停时的定时器清理 #

确保暂停时彻底清除定时器，避免切换数据后定时器残留执行：

const handlePause = () => {
  setIsPlaying(false);
  if (timerRef.current) {
    clearInterval(timerRef.current);
    timerRef.current = null;
  }
};

修复逻辑说明 #

当切换选项导致props.activityData更新时，useEffect会触发状态重置，清空之前的路径记录和位置指针，同时停止所有可能在运行的定时器。启动新数据播放时，又会强制初始化状态，确保绘制从新数据的第一个点开始，不会和旧数据产生关联连线。

内容的提问来源于stack exchange，提问作者program.exe