Reactjs+styled-components悬停翻转卡片全量同步翻转问题

你的判断完全准确：当前代码仅声明了一个全局布尔型flip状态，所有渲染的角色卡片共用这一个状态值。鼠标悬停任意卡片触发setFlip(true)时，整个组件重渲染，所有卡片的正反面子组件都会接收到flip={true}的属性，因此同步触发翻转动画。

有两种常规实现方式，可根据项目结构选择：

方案1：调整状态存储逻辑，记录当前悬停的卡片标识 #

将原本存布尔值的flip状态，改为存储当前被悬停卡片的唯一索引/ID，仅当卡片自身标识和状态存储的标识匹配时，才触发翻转效果，核心修改代码如下：

// 替换原有的 const [flip, setFlip] = useState(false)
const [hoveredCardId, setHoveredCardId] = useState(null);

return (
<CardContainer>
  {loading && <h1 className="loading">LOADING...</h1>}
  {characters.map((character, index) => {
    // 仅当前卡片匹配悬停ID时为翻转状态
    const isFlipped = hoveredCardId === index;
    return (
      <Card 
        key={character.name}
        id={index}
        onMouseEnter={() => setHoveredCardId(index)}
        onMouseLeave={() => setHoveredCardId(null)}
      >
        <CardFront flip={isFlipped}>
          <CardContent>
            <CardImage img={characterToProfileImage[character.name]} />
          </CardContent>
          <BGFade />
        </CardFront>
        <CardBack flip={isFlipped}>
          <CardContent>
            <h1 className="info-name">{character.name} </h1>
            <h2 className="info-text">Height: {character.height}cm </h2>
            <h2 className="info-text">Weight: {character.mass}kg </h2>
            <h2 className="info-text">Gender: {character.gender} </h2>
            <h2 className="info-text">Eye color: {character.eye_color} </h2>
            <h2 className="info-text">
              Birth year: {character.birth_year}
            </h2>
          </CardContent>
        </CardBack>
      </Card>
    );
  })}
</CardContainer>
)

方案2：抽离单卡片组件，状态内聚管理 #

如果后续卡片需要新增更多独立交互，可以把单个角色卡片抽为独立组件，每个组件自行维护翻转状态，从根源上避免状态互相干扰：

// 定义独立的角色卡片组件
const CharacterCard = ({ character }) => {
  const [flip, setFlip] = useState(false);
  return (
    <Card
      onMouseEnter={() => setFlip(true)}
      onMouseLeave={() => setFlip(false)}
    >
      <CardFront flip={flip}>
        <CardContent>
          <CardImage img={characterToProfileImage[character.name]} />
        </CardContent>
        <BGFade />
      </CardFront>
      <CardBack flip={flip}>
        <CardContent>
          <h1 className="info-name">{character.name} </h1>
          <h2 className="info-text">Height: {character.height}cm </h2>
          <h2 className="info-text">Weight: {character.mass}kg </h2>
          <h2 className="info-text">Gender: {character.gender} </h2>
          <h2 className="info-text">Eye color: {character.eye_color} </h2>
          <h2 className="info-text">
            Birth year: {character.birth_year}
          </h2>
        </CardContent>
      </CardBack>
    </Card>
  )
}

// 列表渲染部分直接调用独立组件即可
return (
<CardContainer>
  {loading && <h1 className="loading">LOADING...</h1>}
  {characters.map((character) => (
    <CharacterCard key={character.name} character={character} />
  ))}
</CardContainer>
)

注意：列表渲染时必须给最外层卡片项加上唯一key属性，优先使用角色名这类业务层面的唯一值，不要单纯使用数组索引，避免React渲染diff时出现异常。

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