如何在React中用Fetch API渲染JSON数据？解决Card重复声明报错

先搞定「Card已重复声明」的报错 #

这个错误就是字面意思：你代码里存在两个同名的Card，常见场景包括：

• 从UI库（比如AntD、Material-UI）导入了Card组件，同时自己又定义了同名的函数组件const Card = () => {...}
• 重复import了同一个Card组件（概率较低，但也可以检查下）

解决办法二选一：

• 把自定义的卡片组件改名，比如改成MemberCard
• 如果是导入的第三方Card组件，用别名区分，比如import { Card as UICard } from 'antd'

再把API数据渲染成成员卡片 #

假设你已经能成功获取并打印API返回的数组数据，按以下步骤完成可视化渲染：

1. 用State存储数据 #

在组件中通过useState初始化空数组，再用useEffect发起API请求并将数据存入State：

import { useState, useEffect } from 'react';

function MemberPage() {
  // 初始化空数组存储成员数据
  const [members, setMembers] = useState([]);

  useEffect(() => {
    // 示例用fetch发起请求，用axios也可以
    fetch('你的API地址')
      .then(res => res.json())
      .then(data => {
        console.log(data); // 你已能打印该数据
        setMembers(data); // 将数据存入State
      })
      .catch(err => console.log('请求出错：', err));
  }, []); // 空依赖确保组件挂载时仅执行一次请求

2. 定义不重名的卡片组件 #

在组件内部定义一个用于渲染单条成员信息的卡片组件：

// 自定义成员卡片，避免和第三方Card组件重名
  const MemberCard = ({ member }) => {
    return (
      <div style={{ border: '1px solid #eee', padding: '16px', margin: '8px', borderRadius: '8px' }}>
        <h3>{member.name}</h3>
        <p>职位：{member.position}</p>
        <p>邮箱：{member.email}</p>
        {/* 其他需要展示的字段，根据你的JSON数据结构调整 */}
      </div>
    );
  };

3. 遍历数组渲染所有卡片 #

在组件的return部分，用map遍历members数组，将每个成员的数据传入MemberCard：

return (
    <div style={{ padding: '24px', maxWidth: '1200px', margin: '0 auto' }}>
      <h2>成员列表</h2>
      {/* 遍历数组时必须添加唯一key，建议用成员的id，不要用数组索引 */}
      {members.map(member => (
        <MemberCard key={member.id} member={member} />
      ))}
    </div>
  );
}

export default MemberPage;

关键注意点 #

• 遍历列表时必须添加key属性，且要使用每个成员的唯一标识（比如id），避免使用数组索引，防止渲染异常
• 如果使用第三方UI库的Card组件，直接在自定义的MemberCard中嵌套使用即可，只要保证组件名称不重复

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