React表格渲染问题：DataRow组件传参后仍无法正常显示如何解决？

问题根源 #

1. 组件调用方式错误：直接以普通函数调用DataRow()的方式渲染组件，不符合React组件的使用规范，无法正确传递props。
2. 未遍历用户数据数组：获取了users数组但未循环遍历，无法渲染所有用户的行数据。
3. Props接收逻辑有误：React.FC的参数是props对象，你当前的data参数是整个props容器，而非单个用户数据，导致无法正确读取属性。

修正后的完整代码 #

const Task7: React.FC = () => {
  const { users, error } = useSWR("/api/users", fetchData);

  // 处理加载/错误状态
  if (error) return <div>加载失败</div>;
  if (!users) return <div>加载中...</div>;

  return (
    <div>
      <table className="data__table">
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Age</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          {/* 遍历用户数组，为每个用户渲染行组件 */}
          {users.map(user => (
            <DataRow key={user.id} {...user} />
          ))}
        </tbody>
      </table>
    </div>
  );
};

// 直接解构props中的属性，避免混淆props对象与数据对象
const DataRow: React.FC<Users> = ({ id, name, age, email }) => {
  return (
    <tr>
      <td>{id}</td>
      <td>{name}</td>
      <td>{age}</td>
      <td>{email}</td>
    </tr>
  );
};

关键修改说明 #

• 使用users.map()遍历数据数组，为每个用户生成对应的DataRow组件，同时添加key属性（React列表渲染的强制要求）。
• 改用JSX标签<DataRow />渲染组件，通过{...user}展开用户对象的所有属性作为props传递。
• 修改DataRow的props接收方式，直接解构所需属性，避免混淆props容器与实际数据。
• 补充加载和错误状态处理，优化页面交互体验。

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