React-Tailwind滑块hover效果仅在最后一张幻灯片生效问题求助

问题出在你使用了单个状态变量控制所有幻灯片的hover状态，所有幻灯片共用同一个状态值，当任意一张幻灯片触发hover事件时，状态会被最后触发的事件覆盖，最终只有最后一张幻灯片的hover状态能正确显示。

解决步骤： #

1. 将单个hover状态替换为数组，每个元素对应一张幻灯片的hover状态：

const [isHoverArr, setIsHoverArr] = useState(new Array(images.length).fill(false));

2. 给每张幻灯片的鼠标事件绑定对应索引，精准更新对应位置的状态：

onMouseEnter={() => {
  setIsHoverArr(prev => {
    const newArr = [...prev];
    newArr[index] = true;
    return newArr;
  });
}}
onMouseLeave={() => {
  setIsHoverArr(prev => {
    const newArr = [...prev];
    newArr[index] = false;
    return newArr;
  });
}}

3. 渲染背景样式时，使用对应索引的状态值：

style={{
  // 其他样式...
  backgroundColor: isHoverArr[index] ? 'rgba(0,0,0,0.5)' : 'transparent'
}}

原理说明： #

原来的单个状态变量会被所有幻灯片的onMouseEnter/onMouseLeave事件修改，每次触发事件都会把状态设置为当前幻灯片的hover状态，最后触发的事件（通常是最后一张幻灯片的）会覆盖之前的状态值，导致只有最后一张的hover状态能正确反映到样式上。改用数组状态后，每张幻灯片的hover状态独立存储，不会互相干扰。

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