React Hook useEffect报错致网站无法部署，求修复方案

核心问题 #

你遇到的报错根源是useEffect未指定正确的依赖数组，且内部调用了修改组件状态的toggleConnect函数，导致组件反复渲染、useEffect反复执行，形成无限更新链。部署环境通常会严格检查Hook规则，仅用// eslint-disable-next-line跳过警告无法从根本解决问题。

正确解决方案 #

步骤1：稳定函数引用（若函数为组件内定义） #

如果getAddress、toggleConnect、updateButton是组件内部定义的函数，用useCallback包裹它们，确保引用在组件渲染时保持稳定，避免不必要的useEffect触发：

import { useCallback } from 'react';

// 包裹你的业务函数
const getAddress = useCallback(() => {
  // 此处为getAddress的原有逻辑
}, []); // 根据函数内部用到的变量添加依赖，若无则留空

const toggleConnect = useCallback((val) => {
  // 此处为toggleConnect的原有逻辑
}, []); // 若函数用到状态/ props，需添加对应依赖

const updateButton = useCallback(() => {
  // 此处为updateButton的原有逻辑
}, []);

步骤2：完善useEffect的依赖与清理逻辑 #

修改useEffect，添加完整的依赖数组，并增加事件监听的清理函数（防止内存泄漏）：

useEffect(() => {
  // 提取连接检查逻辑为内部函数
  const checkConnection = () => {
    const isConnected = window.ethereum.isConnected();
    if (isConnected) {
      console.log("here");
      getAddress();
      toggleConnect(isConnected);
      updateButton();
    }
  };

  // 提取账户变更处理函数
  const handleAccountsChanged = (accounts) => {
    window.location.replace(location.pathname);
  };

  // 初始化检查连接状态
  checkConnection();

  // 绑定事件监听
  window.ethereum.on('accountsChanged', handleAccountsChanged);

  // 清理函数：组件卸载/依赖变更时移除监听
  return () => {
    window.ethereum.removeListener('accountsChanged', handleAccountsChanged);
  };
}, [getAddress, toggleConnect, updateButton, location.pathname]); // 加入所有用到的外部依赖

关键说明 #

• 依赖数组必须包含useEffect内部用到的所有外部变量、函数，确保useEffect仅在依赖变化时执行，打破无限更新链。
• 若toggleConnect是useState生成的setter函数（如const [isConnected, toggleConnect] = useState(false)），则它的引用天生稳定，无需用useCallback包裹，直接加入依赖数组即可。
• 添加清理函数移除事件监听是React Hook的最佳实践，避免组件卸载后残留监听导致内存泄漏。

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