React中OnMouseEnter事件无限触发问题求助

可能原因 #

• 匿名函数导致重复绑定与重渲染：每次组件重渲染时，OnMouseEnter={() => handleMouseEnter(index)}会生成新的匿名函数，React会判定li的事件属性发生变化，进而重新渲染该元素，鼠标若仍在元素上方就会再次触发MouseEnter，形成循环。
• 状态更新引发的列表重渲染：在handleMouseEnter中更新数组的active属性时，整个结果列表会重新渲染，原li元素可能被重建，此时鼠标位置未变，会再次触发MouseEnter事件。
• 事件名大小写错误：React事件采用小驼峰命名，OnMouseEnter应为onMouseEnter，错误命名可能导致事件绑定逻辑异常，引发意外触发。

解决办法 #

• 用useCallback缓存处理函数+添加稳定key：通过useCallback避免每次重渲染创建新的处理函数，同时给列表项添加唯一key，确保React能正确识别列表项身份：

  import { useCallback } from 'react';
  
  const handleMouseEnter = useCallback((index) => {
    setResults(prevResults => 
      prevResults.map((item, idx) => ({
        ...item,
        active: idx === index
      }))
    );
  }, []);
  
  // 列表渲染逻辑
  {results.map((item, index) => (
    <li 
      key={item.id} // 使用项的唯一标识作为key
      onMouseEnter={() => handleMouseEnter(index)}
      className={item.active ? 'active-item' : ''}
    >
      {item.content}
    </li>
  ))}
  

• 修正事件名：将OnMouseEnter改为标准的onMouseEnter，确保事件绑定符合React规范。
• 优化状态更新逻辑：确保状态更新仅修改必要项（上述map方式已满足，但结合useCallback和key能进一步减少不必要的重渲染）。

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