React中如何在其他组件展示fetch获取的用户数据？

1. 父组件：完善数据获取逻辑并传递数据 #

首先得确保数据能正常加载，你原代码里只定义了users函数但没触发执行，需要用useEffect在组件挂载时调用它，同时加上错误处理避免请求失败导致的异常。之后把获取到的user数组通过props传给子组件。

import { useState, useEffect } from 'react';
import UserList from './UserList'; // 引入子组件

export default function ParentComponent() {
  const [user, setUser] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  async function fetchUsers() { 
    try {
      const result = await fetch('你的API地址'); // 替换成实际API URL
      if (!result.ok) throw new Error('请求失败');
      const data = await result.json();          
      setUser(data);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    fetchUsers();
  }, []);

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

  return (
    <div>
      <UserList users={user} />
    </div>
  );
}

2. 子组件：接收数据并渲染蓝色模块的用户名 #

子组件通过props接收users数组，遍历数组渲染每个用户名，用内联样式或CSS类实现蓝色小模块效果。

方式一：内联样式 #

export default function UserList({ users }) {
  return (
    <div className="user-container">
      {users.map((user) => (
        <div 
          key={user.id} // 必须加唯一key，避免React警告
          style={{
            backgroundColor: '#4285F4', // 蓝色背景
            color: 'white',
            padding: '8px 12px',
            borderRadius: '4px',
            margin: '4px 0',
            display: 'inline-block', // 横向排列，换成block可纵向排列
            marginRight: '8px'
          }}
        >
          {user.name}
        </div>
      ))}
    </div>
  );
}

方式二：CSS类（推荐，样式更易维护） #

先创建CSS文件（比如UserList.css）：

.user-tag {
  background-color: #4285F4;
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 4px 8px 4px 0;
  display: inline-block;
}

然后子组件引入CSS：

import './UserList.css';

export default function UserList({ users }) {
  return (
    <div className="user-container">
      {users.map((user) => (
        <div key={user.id} className="user-tag">
          {user.name}
        </div>
      ))}
    </div>
  );
}

关键注意点 #

• 列表项必须加key属性，值要唯一（比如用户ID），这是React列表渲染的硬性要求。
• 加入加载和错误状态，避免数据未加载时出现空页面或报错，提升用户体验。
• 如果你的API返回的是单个用户对象（而非数组），要把useState的初始值改成null，渲染时先判断user是否存在再展示内容。

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