React如何实现鼠标悬停时仅显示当前Card卡片的内容？

你当前使用单个布尔值isHovering作为整个组件的全局悬停状态，所有卡片共用这一个状态做渲染判断：

• 任意卡片触发鼠标移入事件，都会把isHovering设为true，所有卡片都会命中展示描述的逻辑分支
• 鼠标移出时isHovering被设为false，所有卡片的描述又会同时隐藏
  核心问题是没有标记「当前处于悬停状态的是哪张卡片」，导致所有卡片的显隐逻辑完全同步。

方案1：状态存储悬停卡片ID（适合悬停时需要触发其他JS交互的场景） #

把原来存储布尔值的状态，改为存储当前悬停卡片的唯一ID，仅当卡片自身ID和状态中存储的ID匹配时，才展示对应描述。
修改后的完整代码：

export function Items() {
    const [items, setItems] = useState([])
    // 存储当前悬停的卡片ID，默认值为null代表无悬停卡片
    const [hoveredItemId, setHoveredItemId] = useState(null)

    useEffect(() => {
        setItems(Data)
    }, [])
    
    function handleMouseOver(id) {
        setHoveredItemId(id)
    }
    function handleMouseOut() {
        setHoveredItemId(null)
    }

    return(
        <div>
            {items.map(item => {
                return(
                    <Card 
                        onMouseOver={() => handleMouseOver(item.id)} 
                        onMouseOut={handleMouseOut} 
                        key={item.id}
                    >
                        {/* 仅当前卡片为悬停目标时展示描述 */}
                        {hoveredItemId === item.id ? 
                            <Card.Body>
                                <p>{item.item_description}</p>
                            </Card.Body>
                        :
                            <Card.Body>
                            </Card.Body>
                        }
                        <Card.Footer>

                        </Card.Footer>
                    </Card>
                )
            })}
        </div>
    )
}

方案2：纯CSS实现（纯显隐场景首选） #

如果只需要做悬停显隐描述的交互，不需要在悬停时触发其他JS逻辑，完全不需要编写React状态逻辑，直接用CSS:hover伪类控制即可，没有额外的状态更新重渲染开销，代码更简洁。
组件代码简化为：

export function Items() {
    const [items, setItems] = useState([])

    useEffect(() => {
        setItems(Data)
    }, [])

    return(
        <div>
            {items.map(item => {
                return(
                    <Card key={item.id} className="item-card">
                        <Card.Body className="card-desc">
                            <p>{item.item_description}</p>
                        </Card.Body>
                        <Card.Footer>

                        </Card.Footer>
                    </Card>
                )
            })}
        </div>
    )
}

搭配对应样式代码：

/* 默认隐藏所有卡片描述 */
.item-card .card-desc {
    display: none;
}
/* 仅鼠标悬停的当前卡片展示描述 */
.item-card:hover .card-desc {
    display: block;
}

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