React组件中JS循环渲染API数据页面空白问题求助

你的代码存在几个关键问题导致页面空白，逐一修正如下：

核心错误点 #

• 组件返回值错误：你直接返回了fetch调用的Promise对象，但React函数组件要求返回有效的JSX元素（或null），Promise不是可渲染的节点，所以页面无内容。
• 异步数据未用状态管理：API请求是异步的，组件初始渲染时没有数据，也没有用useState存储请求到的数据，无法触发组件重新渲染展示数据。
• 循环生成的JSX未被收集返回：循环里创建的<div>元素只是被创建但没有被收集到数组中返回，相当于没有生成任何可渲染内容。
• 缺少副作用触发请求：没有用useEffect包裹API请求，会导致组件每次渲染都重复发起请求，且不符合React的生命周期规范。

修正后的完整代码 #

import React, { useState, useEffect } from "react";

function Api() {
  // 定义状态存储大学数据、加载状态、错误信息
  const [universities, setUniversities] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // 使用useEffect在组件挂载时发起API请求
  useEffect(() => {
    fetch('http://universities.hipolabs.com/search?country=Pakistan')
      .then((api_data) => {
        if (!api_data.ok) {
          throw new Error('请求失败');
        }
        return api_data.json();
      })
      .then((json_data) => {
        setUniversities(json_data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
    // 空依赖数组确保只在组件挂载时执行一次
  }, []);

  // 处理加载状态
  if (loading) {
    return <div>加载中...</div>;
  }

  // 处理错误状态
  if (error) {
    return <div>出错了：{error}</div>;
  }

  // 遍历数据生成JSX元素数组并渲染
  return (
    <div>
      {universities.map((uni, index) => (
        <div key={index} style={{ borderWidth: 2, borderStyle: 'solid', margin: '10px 0', padding: '10px' }}>
          Serial No: {index + 1} <br />
          Name of University: {uni.name} <br />
          Province Code: {uni.stateProvince || '无'} <br />
          Country: {uni.country} <br />
          Country Code: {uni.alpha_two_code} <br />
          URL Domain: {uni.domains[0]} <br />
          URL: <a href={uni.web_pages[0]} target="_blank" rel="noopener noreferrer">{uni.web_pages[0]}</a> <br />
        </div>
      ))}
    </div>
  );
}

export default Api;

关键改动说明 #

1. 添加状态管理：用useState分别存储数据、加载状态和错误信息，确保数据变化时组件能重新渲染。
2. 用useEffect发起请求：将API请求放在useEffect中，空依赖数组保证只请求一次，避免重复请求。
3. 收集并返回JSX元素：使用map方法遍历数据，生成JSX元素数组，每个元素添加唯一key属性（React要求）。
4. 添加状态反馈：增加加载中、错误状态的展示，提升用户体验。
5. 优化样式与容错：给div添加borderStyle（否则只设置borderWidth不会显示边框）；处理stateProvince可能为空的情况，避免显示undefined。

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