React无效钩子调用问题：localStorage变更时重渲染地图报错

问题根源 #

你遇到的错误核心原因很明确：自定义钩子useLayerData被调用在了函数组件的外部，这直接违反了React Hooks的强制规则——所有钩子必须在函数组件的顶层作用域内调用，不能在组件外、条件判断、循环或嵌套函数里执行。

修复步骤 #

1. 把钩子调用移到函数组件内部

首先调整代码结构，将useLayerData的调用放到地图组件的顶层：

// 错误写法：组件外部调用钩子
// const layerData = useLayerData();

// 正确写法：在函数组件顶层调用钩子
function MapGenerator() {
  // 移到这里，确保在组件顶层
  const { layerData } = useLayerData();

  // 地图渲染逻辑，依赖layerData自动重渲染
  return (
    <div className="map-wrapper">
      {/* 这里渲染地图内容，layerData变化时自动更新 */}
    </div>
  );
}

2. 完善useLayerData钩子，监听localStorage变化

要实现localStorage中LayersData变更时触发重渲染，需要在钩子内部添加storage事件监听，同时初始化时读取本地存储数据：

function useLayerData() {
  // 初始化时从localStorage读取数据
  const [layerData, setLayerData] = useState(() => {
    const storedData = localStorage.getItem('LayersData');
    return storedData ? JSON.parse(storedData) : [];
  });

  useEffect(() => {
    // 监听localStorage的变化事件
    function handleStorageUpdate(e) {
      // 只处理LayersData的变更
      if (e.key === 'LayersData') {
        setLayerData(e.newValue ? JSON.parse(e.newValue) : []);
      }
    }

    // 添加全局监听
    window.addEventListener('storage', handleStorageUpdate);

    // 组件卸载时清除监听
    return () => window.removeEventListener('storage', handleStorageUpdate);
  }, []);

  // 提供统一的更新方法，确保状态与localStorage同步
  const updateLayersData = (newData) => {
    localStorage.setItem('LayersData', JSON.stringify(newData));
    setLayerData(newData);
  };

  return { layerData, updateLayersData };
}

• 当你在其他组件中修改LayersData时，调用updateLayersData方法，既会更新localStorage，也会同步更新组件状态，触发地图重渲染。
• 全局storage事件能监听其他标签页对localStorage的修改，保证多标签页下数据同步。

3. 遵守钩子调用的核心规则

• 所有钩子（包括自定义钩子）必须在函数组件或其他自定义钩子的顶层作用域调用，不能放在if、for、嵌套函数里。
• 不要尝试在组件外部通过钩子获取状态再传递给组件，这会破坏React的状态更新机制。

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