如何根据API返回条目数量动态渲染对应数量的React Card组件

你不需要单独统计id总数，API返回的locations本身就是数组结构，数组的长度就对应条目总数，直接对数组做map遍历就能动态生成对应数量的卡片，修改后的代码如下：

import { useState, useEffect } from 'react';
import axios from 'axios';

// 单独抽离单个卡片的展示组件，方便复用
function SingleCard({ locationItem }) {
  return (
    <div className="card-item">
      <h3>{locationItem.name}</h3>
      <p>ID：{locationItem.id}</p>
      {/* 此处可添加你已开发完成的其他卡片字段展示逻辑 */}
    </div>
  )
}

function CardList() {
  const url = "https://6033c4d8843b15001793194e.mockapi.io/api/locations";
  const [locations, setLocations] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios.get(url)
      .then(response => {
        setLocations(response.data);
      })
      .catch(err => {
        setError(err.message);
      })
      .finally(() => {
        setLoading(false);
      })
  }, [url])

  if (loading) return <div>加载中...</div>;
  if (error) return <div>请求错误：{error}</div>;

  return (
    <div className="card-container">
      <h1>Acme HQ</h1>
      {/* 遍历数组自动生成对应数量的卡片 */}
      {locations.map(item => (
        <SingleCard key={item.id} locationItem={item} />
      ))}
    </div>
  )
}

export default CardList;

核心改动说明 #

• 组件拆分：把单个卡片的展示逻辑抽成SingleCard组件，和列表请求逻辑分离，后续修改卡片样式/内容只需要调整这个组件即可
• 动态渲染逻辑：直接用数组map遍历所有接口返回条目，不需要额外计算总数，后续接口数据数量变动时，渲染的卡片数量会自动同步
• 补全状态处理：增加了加载中、错误提示的分支逻辑，避免页面出现异常空白
• 合法列表渲染：遍历生成列表元素时传入唯一key属性，这里直接使用每条数据自带的id即可符合React规范

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