React中鼠标悬停仅显示当前卡片图标问题求助

你的核心问题是用了单一布尔值状态visible控制所有卡片的图标显示，只要这个值为true，所有卡片的图标都会一起出现。要实现仅当前悬停卡片显示图标，需要把状态改成记录当前悬停的卡片ID/索引，而非全局的布尔值。

具体修改步骤 #

1. 修改状态定义
   把原来的visible布尔状态，换成记录当前悬停卡片的ID（推荐用ID，因为数组排序后索引会变化）：

   // 初始值设为null，表示没有卡片被悬停
   const [hoveredId, setHoveredId] = useState(null);
   

2. 修正鼠标事件函数
   去掉多余的判断逻辑，直接在悬停时设置当前卡片的ID，离开时清空：

   const handleMouseEnter = (id) => {
     setHoveredId(id);
   };
   
   const handleMouseLeave = () => {
     setHoveredId(null);
   };
   

3. 调整卡片渲染逻辑
   在判断图标显示时，只让当前悬停ID匹配的卡片显示图标，同时修正几个细节问题：

   {interestsList
     .sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0))
     .map((el) => (
       <InterestCard
         key={el.id} // 不要用index当key，用卡片唯一ID避免排序后组件复用错误
         onMouseEnter={() => handleMouseEnter(el.id)}
         onMouseLeave={handleMouseLeave}>
         {/* 修正onClick：原写法会在渲染时直接执行openCatPage，改成箭头函数包裹 */}
         <CategoryLeftCol onClick={() => openCatPage(el.id)}>
           <SurfingRoundedIcon sx={{ fontSize: 22 }} />
           <Typography variant="h6" fontWeight="bold">
             {el.name}
           </Typography>
         </CategoryLeftCol>
         {/* 仅当当前卡片ID等于hoveredId时，才显示操作图标 */}
         {hoveredId === el.id && (
           <CategoryRightCol>
             <IconButton onClick={() => setOpen(true)}>
               <Edit sx={{ fontSize: 14 }} />
             </IconButton>
             <IconButton onClick={() => setOpenAlert(true)}>
               <Delete sx={{ fontSize: 14 }} />
             </IconButton>
           </CategoryRightCol>
         )}
       </InterestCard>
     ))
   }
   

额外注意事项 #

• 原代码中onMousseEnter拼写错误，正确是onMouseEnter，记得修正函数名。
• 尽量避免用数组index作为组件key，尤其是数组会排序/增删时，用每个item的唯一ID更稳定。

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