React中map渲染元素hover事件触发全部项的问题排查

一、为何所有元素同时触发hover？ #

你最初的代码里，用了一个全局布尔值hover作为状态，所有通过.map渲染的<a>元素都共享这个状态。当任意一个元素触发onPointerOver时，setHover(true)会把全局状态设为true，所有元素的样式函数都会读取到hover: true，导致全部元素触发hover效果。

二、第二次尝试的代码错误点 #

1. 函数名笔误：你在style属性里写了setInboxItemStyle，但原样式函数是inboxItemStyle，这直接导致样式完全不生效。
2. 样式判断逻辑缺失：样式函数只接收了hover状态值，但没有和当前元素的索引做对比，无法区分哪个元素应该触发hover样式。

三、修复后的完整代码 #

const data = [
    {id: 1, text: 'Inbox Item 1 -- Subject -- Short description', date: '1.03.2016'},
    {id: 2, text: 'Inbox Item 2 -- Subject -- Short description', date: '23.01.2017'},
    {id: 3, text: 'Inbox Item 3 -- Subject -- Short description', date: '12.01.2022'}
];

// 修改样式函数，通过当前元素索引与hover状态对比判断样式
const inboxItemStyle = ({ currentIndex, hoverIndex }) => ({
    display: "block",
    borderBottom: '1px solid #CCC',
    backgroundColor: currentIndex === hoverIndex ? '#EEF' : '#FFF',
    padding:"15px",
})

function Inbox() {
    const [hoverIndex, setHoverIndex] = useState(-1);

    const showHandler = (i) => {
        setHoverIndex(i);
    }

    const hideHandler = () => {
        setHoverIndex(-1);
    }

    return (
        <div className="list-group">
            {
                data.map((item, i) => (
                    <SwipeToDelete key={item.id}>
                        <a 
                            style={inboxItemStyle({ currentIndex: i, hoverIndex })}
                            onMouseLeave={hideHandler}
                            onMouseEnter={() => showHandler(i)}
                        >
                            <h4 className="list-group-item-heading">{item.date}</h4>
                            <p className="list-group-item-text">{item.text}</p>
                        </a>
                    </SwipeToDelete>
                ))
            }
        </div>
    );
}
export default Inbox;

四、额外优化建议 #

• 用元素的id代替索引作为hover状态标识，避免数组排序或元素增减导致索引混乱：

  // 初始化状态为null
  const [hoverId, setHoverId] = useState(null);
  // showHandler接收item.id
  const showHandler = (id) => setHoverId(id);
  // 样式判断改为item.id与hoverId对比
  const inboxItemStyle = ({ itemId, hoverId }) => ({
      // ...其他样式
      backgroundColor: itemId === hoverId ? '#EEF' : '#FFF',
  })
  // 渲染时传入item.id
  <a 
      style={inboxItemStyle({ itemId: item.id, hoverId })}
      onMouseLeave={() => setHoverId(null)}
      onMouseEnter={() => showHandler(item.id)}
  >
  

• 如果不需要额外交互逻辑，直接用CSS的:hover伪类更高效简洁，无需React状态：

  .inbox-item:hover {
      background-color: #EEF;
  }
  

  给<a>添加className="inbox-item"即可实现单元素hover效果。

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