React中onMouseEnter触发时如何避免所有元素同步更新？

你现在的问题出在用单个布尔状态showElement控制所有prompt元素的可见性——所有列表项都绑定同一个状态，所以只要状态变化，所有prompt都会同步切换显示。

解决思路是把状态改成存储当前hover的列表项索引，而非单纯的布尔值：

1. 将状态从showElement改为hoverIndex，初始值设为null（表示没有任何项被hover）
2. 鼠标进入时，把当前项的索引i存入状态；离开时重置为null
3. 每个prompt元素判断当前项的索引是否等于hoverIndex，来控制自身可见性

修改后的核心代码如下：

const [hoverIndex, setHoverIndex] = useState(null);

return (
  <>
    {images.map((_, i) => {
      return (
        <div className="itemVert" key={i}>
          <div 
            className="item"
            onMouseEnter={() => setHoverIndex(i)} 
            onMouseLeave={() => setHoverIndex(null)}
          >
            <img src={`./images/${myjson.images[i].name}`} alt="" />          
          </div>

          <div 
            className="prompt"
            style={{ visibility: hoverIndex === i ? 'visible' : 'hidden' }}
          >
            {myjson.images[i].prompt}
          </div>   
        </div> 
      )
    })}
  </>
)

另外注意：你原来map的参数顺序写反了，map((index, i)应该是map((item, i)（如果不需要用到当前元素，可以用_占位），上面的代码已经修正了这个细节。

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