React啤酒卡片初始无数据加载，点击后才显示的问题求助

问题描述 #

我两天前刚开始学React，纯新手。现在做一个简单应用，从公开API加载啤酒数据（图片、名称、标语）展示在卡片上，点击卡片切换显示描述、名称、标语。现在遇到的问题是初始加载时没有数据，只有点击卡片后才会显示，在加点击功能和backFacingCard之前一切正常。

问题原因 #

你把卡片的JSX直接存在了useState的初始值里。组件第一次渲染时，API请求还没完成，props.beer大概率是undefined，此时frontFacingCard.src里的props.beer?.xxx都是空值。而useState的初始值只会在组件挂载时赋值一次，后续props.beer拿到数据更新时，card状态不会自动同步最新的props.beer，只有点击卡片触发clickHandler重新设置card时，才会使用最新的props.beer数据，所以初始加载看不到内容，点击后才显示。

解决方案 #

不要把JSX存在状态里，而是根据showsFront的状态，在组件渲染时动态生成对应的卡片内容。这样每次props.beer更新，组件重新渲染都会自动使用最新的数据。

修改后的代码 #

const BeerTile = (props) => {
  const [showsFront, setShowsFront] = useState(true);

  const clickHandler = () => {
    setShowsFront(prev => !prev);
    props.frontSide(!showsFront);
  };

  // 动态渲染正面卡片
  const renderFrontCard = () => (
    <Card
      hoverable
      size="small"
      style={{ width: 350, height: 220 }}
      cover={
        <img
          className="beer_tile_card_img"
          alt="beer-bottle"
          src={props.beer?.image_url}
        />
      }
    >
      <Meta
        className="meta"
        title={props.beer?.name}
        description={props.beer?.tagline}
      />
    </Card>
  );

  // 动态渲染反面卡片
  const renderBackCard = () => (
    <Card
      hoverable
      size="small"
      style={{ width: 350, height: 220 }}
      cover={
        <div className="beer-description">{props.beer?.description}</div>
      }
    >
      <Meta
        className="meta"
        title={props.beer?.name}
        description={props.beer?.tagline}
      />
    </Card>
  );

  return (
    <div
      className="beer_tile_card"
      onClick={clickHandler}
      front={showsFront ? 1 : 0}
    >
      {showsFront ? renderFrontCard() : renderBackCard()}
    </div>
  );
};

关键改动说明 #

• 移除了card状态，不再把JSX存在状态中，而是通过两个渲染函数动态生成卡片
• clickHandler里简化了状态切换逻辑，用setShowsFront(prev => !prev)直接取反，同时传递最新的状态给props.frontSide（之前的写法传递的是旧状态，因为setShowsFront是异步的）
• 每次组件渲染时，都会根据最新的props.beer生成卡片内容，API数据加载完成后会自动更新显示

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