React中useEffect内函数未定义及重复渲染问题咨询

第一个错误：Too many re-renders. #

你第一段代码的问题是直接执行了状态更新函数：

onMouseEnter={setIsHover(true)}

setIsHover(true)会在组件每次渲染时立刻执行，导致isHover状态更新，触发组件重新渲染；重新渲染后又会再次执行setIsHover(true)，形成无限循环，最终抛出“Too many re-renders.”错误。

正确做法是给事件处理器传递函数引用，而非直接执行函数：

onMouseEnter={() => setIsHover(true)}

这样只有当鼠标进入按钮时，才会调用箭头函数并执行状态更新逻辑。

第二个错误：onHover is not defined #

你在useEffect内部声明的onHover函数，作用域仅限于useEffect的回调函数内部，组件的JSX部分根本访问不到这个函数，因此会报错“onHover is not defined”。

而且这里完全没必要用useEffect——useEffect用于处理组件副作用（比如数据请求、DOM操作、订阅等），绑定鼠标事件属于UI交互逻辑，直接在组件内部定义或用箭头函数绑定即可，不需要借助useEffect。

正确的实现代码 #

写法一：直接用箭头函数绑定事件 #

import "./styles.css";
import { useState } from "react";

export default function App() {
  const [isHover, setIsHover] = useState(false);

  return (
    <button 
      onMouseEnter={() => setIsHover(true)} 
      onMouseLeave={() => setIsHover(false)}
    >
      {isHover ? "鼠标悬停中" : "click"}
    </button>
  );
}

写法二：提前定义事件处理函数 #

如果逻辑更复杂，可提前定义函数提升可读性：

import "./styles.css";
import { useState } from "react";

export default function App() {
  const [isHover, setIsHover] = useState(false);

  const handleMouseEnter = () => {
    setIsHover(true);
    // 可添加更多自定义逻辑
  };

  const handleMouseLeave = () => {
    setIsHover(false);
    // 可添加更多自定义逻辑
  };

  return (
    <button 
      onMouseEnter={handleMouseEnter} 
      onMouseLeave={handleMouseLeave}
    >
      {isHover ? "鼠标悬停中" : "click"}
    </button>
  );
}

什么时候需要在useEffect里定义函数？ #

只有当函数依赖组件状态/ props，且需要在状态/ props变化时重新创建函数，或者需要在组件挂载/卸载时执行清理操作时，才需要在useEffect中处理。比如订阅数据源并在组件卸载时取消订阅：

useEffect(() => {
  const subscription = someDataSource.subscribe();
  return () => subscription.unsubscribe();
}, []);

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