React组件API获取用户列表成功，但表格无法渲染数组值

核心问题梳理 #

• GET请求错误携带body：HTTP规范中GET请求不允许携带body，你当前的request配置里添加了body: JSON.stringify(user)，这会导致请求异常，无法正确获取数据。
• 状态数据结构错误：API返回的data是用户数组（IUser[]），但你用[...prev.user, data]把整个数组作为单个元素塞进了user数组，导致users.user变成二维数组（IUser[][]），遍历的时候每个元素是数组而非单个用户对象，自然无法渲染属性。
• 状态类型冗余：内部状态users不需要继承UsersProps类型，组件props和内部状态职责重复，内部只需维护用户列表和加载状态即可。
• 异步状态更新后立即读取：setUsers是异步操作，更新后直接console.log(users.user)拿不到最新值，应直接打印返回的data，或通过useEffect监听状态变化。
• 表格列不匹配：表头包含Id列，但tbody未渲染user.id，且列顺序与表头不一致。

修复后的代码 #

interface IUser {
  id: number;
  email: string;
  username: string;
  password: string;
}

interface UsersProps {
  url?: string;
}

const Users: React.FC<UsersProps> = ({ url }) => {
  // 简化内部状态，拆分用户列表与加载状态
  const [users, setUsers] = useState<IUser[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // GET请求移除多余的body配置
    fetch(url || '')
      .then(response => {
        if (!response.ok) throw new Error('请求失败');
        return response.json();
      })
      .then(data => {
        // 直接赋值API返回的用户数组，避免二维数组问题
        setUsers(data);
        setLoading(false);
        console.log(data, '获取到的用户数据');
      })
      .catch(err => {
        console.error(err);
        setLoading(false);
      });
  }, [url]);

  const renderUsersTable = () => {
    return (
      <table border="1">
        <thead>
          <tr>
            <th>Id</th>
            <th>Username</th>
            <th>Email</th>
            <th>Password</th>
          </tr>
        </thead>
        <tbody>
          {users.map(user => (
            <tr key={user.id}> {/* 使用用户唯一id作为key，替代index */}
              <td>{user.id}</td>
              <td>{user.username}</td>
              <td>{user.email}</td>
              <td>{user.password}</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  };

  return (
    <div>
      {loading ? <div>加载中...</div> : renderUsersTable()}
    </div>
  );
};

export default Users;

关键修复点说明 #

1. 规范GET请求：移除body配置，符合HTTP协议要求，确保请求正常发送。
2. 修正状态更新逻辑：直接将API返回的用户数组赋值给状态，避免生成二维数组。
3. 拆分独立状态：将用户列表和加载状态拆分为单独的useState，让状态管理更清晰。
4. 优化列表key：使用用户的唯一id作为列表项key，比index更稳定，符合React最佳实践。
5. 匹配表格列：补充Id列渲染，调整列顺序与表头一致。
6. 增加错误处理：捕获请求异常，避免页面一直处于加载状态。

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