React中鼠标悬停仅显示当前元素的TestComponent问题排查

问题根源 #

1. 全局布尔状态导致批量触发
   你用MouseComponent这个布尔值作为所有元素的显示开关，只要状态设为true，所有Symbol元素的{MouseComponent ? <TestComponent /> : null}都会成立，自然全部显示组件。

2. 索引判断逻辑错误
   你尝试用if(j)来触发状态，但数组索引从0开始，j=0时布尔判断为false，不会执行状态更新；而j>=1时判断为true，会把状态设为true，导致除第一个元素外，其他所有元素都显示组件。

正确实现方案 #

核心思路是存储当前悬停元素的唯一标识，而非全局布尔值。由于你的数据是双层数组，建议同时记录外层field索引和内层symbol索引，避免不同field里的相同索引导致冲突。

代码修改步骤：

1. 替换原有的布尔状态，改为存储悬停元素的索引信息：

// 初始值设为null，表示没有元素被悬停
const [hoveredSymbol, setHoveredSymbol] = useState(null);

2. 在渲染逻辑中，判断当前元素是否为悬停状态：

{Symbols.map((field, i) => {
  return (
    <div key={i}>
      {field.symbols.map((symbol, j) => {
        // 检查当前元素的索引是否和状态中存储的一致
        const isCurrentHovered = hoveredSymbol?.fieldIndex === i && hoveredSymbol?.symbolIndex === j;
        return (
          <div
            key={j}
            onMouseOver={() => setHoveredSymbol({ fieldIndex: i, symbolIndex: j })}
            onMouseLeave={() => setHoveredSymbol(null)}          
          >
            {symbol}
            {isCurrentHovered ? <TestComponent /> : null} 
          </div>
        );
      })}
    </div>
  );
})}

优化建议

如果你的symbol对象本身带有唯一ID（比如后端返回的id字段），建议用ID代替索引作为判断依据，这样即使数组元素顺序变化，也不会出现判断错误：

// 状态改为存储symbol的id
const [hoveredSymbolId, setHoveredSymbolId] = useState(null);

// 渲染时判断
{Symbols.map((field, i) => {
  return (
    <div key={i}>
      {field.symbols.map((symbol) => {
        const isCurrentHovered = hoveredSymbolId === symbol.id;
        return (
          <div
            key={symbol.id}
            onMouseOver={() => setHoveredSymbolId(symbol.id)}
            onMouseLeave={() => setHoveredSymbolId(null)}          
          >
            {symbol.name} {/* 假设symbol有name字段 */}
            {isCurrentHovered ? <TestComponent /> : null} 
          </div>
        );
      })}
    </div>
  );
})}

内容的提问来源于stack exchange，提问作者s.kuznetsov