React Hooks实现列表hover时仅触发当前元素效果的问题求助

你当前所有列表项共用同一个inHover布尔状态，只要任意一个元素触发hover修改状态，所有列表项的判断条件{inHover && ...}都会生效，所以所有图片都会显示hover效果。另外原代码还存在map遍历未加key、多处重复定义id、错把className写成class的小问题，后续方案会一并修正。

修改状态存储值为当前悬停元素的ID，初始值为null，仅当当前遍历项的ID和状态中存储的ID一致时，才显示hover效果。
修改后的代码：

import React, { useState } from 'react';
import intialState from '../../intialState';
import '../styles/components/banner.css';

const Banner = () => {
    const home = intialState.itemsHome;
    // 存储当前hover的元素id，初始为null
    const [hoverId, setHoverId] = useState(null);
    return (
        <div className="container h-100" >
            <div className="row align-middle">
            {home.map((item)=>{
               return (
                <div 
                  key={item.id}
                  className="col-md-6 col-lg-4 column"  
                  onMouseEnter={() => setHoverId(item.id)} 
                  onMouseLeave={() => setHoverId(null)} 
                >
                  <div className="card gr-1" style={{position:'absolute'}} >
                    <img src={item.src} style={{position:'absolute'}}  className="image"  />
                    {/* 仅当前项id等于hover的id时显示效果 */}
                    {hoverId === item.id && <div className="info" style={{position:'absolute'}}></div>}
                  </div>  
               </div> 
               );
             }) } 
            </div>
        </div>
    );
}

export default Banner;

把每个列表项封装成单独的子组件，每个子组件自己维护独立的hover状态，互相完全隔离，更符合组件拆分的最佳实践。
代码示例：

import React, { useState } from 'react';
import intialState from '../../intialState';
import '../styles/components/banner.css';

// 抽离的独立列表项组件
const BannerItem = ({item}) => {
  // 每个子组件自己维护hover状态，互不影响
  const [inHover, setHover] = useState(false);
  return (
    <div 
      className="col-md-6 col-lg-4 column"  
      onMouseEnter={() => setHover(true)} 
      onMouseLeave={() => setHover(false)} 
    >
      <div className="card gr-1" style={{position:'absolute'}} >
        <img src={item.src} style={{position:'absolute'}}  className="image"  />
        {inHover && <div className="info" style={{position:'absolute'}}></div>}
      </div>  
   </div> 
  )
}

const Banner = () => {
    const home = intialState.itemsHome;
    return (
        <div className="container h-100" >
            <div className="row align-middle">
              {home.map((item)=> <BannerItem key={item.id} item={item} />)}
            </div>
        </div>
    );
}

export default Banner;

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