React中如何循环展示API返回的嵌套结构数据？

1. 先明确API返回结构 #

假设你的API返回的嵌套数据格式如下：

{
  "status": "success",
  "data": [
    { "id": 1, "title": "示例内容1" },
    { "id": 2, "title": "示例内容2" }
  ]
}

2. 最简实现代码 #

用React最基础的useState存数据、useEffect发请求，直接能跑的写法：

import { useState, useEffect } from 'react';

function ApiDataViewer() {
  // 初始化三个状态：存数据列表、加载状态、错误信息
  const [dataList, setDataList] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [errMsg, setErrMsg] = useState('');

  // 组件首次挂载时发起请求
  useEffect(() => {
    const getApiData = async () => {
      try {
        // 替换成你的API地址
        const res = await fetch('https://your-api-url.com/data');
        if (!res.ok) throw new Error('请求失败，请检查API地址');
        
        const apiResult = await res.json();
        // 重点：直接取返回结果里的data数组赋值
        setDataList(apiResult.data);
      } catch (error) {
        setErrMsg(error.message);
      } finally {
        setIsLoading(false);
      }
    };

    getApiData();
  }, []);

  // 加载中状态提示
  if (isLoading) return <div>数据加载中...</div>;
  // 错误状态提示
  if (errMsg) return <div>出错了：{errMsg}</div>;

  // 渲染数据列表
  return (
    <div className="data-container">
      <h3>API返回数据</h3>
      <ul>
        {dataList.map(item => (
          // 必须加唯一key，用item的id最稳妥
          <li key={item.id}>
            {/* 这里替换成你要展示的字段，比如item.title、item.content等 */}
            {item.title}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ApiDataViewer;

3. 常见错误排查 #

• 没取嵌套的data字段：直接把整个API返回结果赋值给状态，导致找不到数组
• 列表渲染没加key：React会报警告，甚至渲染异常
• 没处理异步状态：请求还没完成就渲染数据，导致页面空白或报错
• 跨域问题：如果API和前端域名不同，需要后端配置CORS，或者本地开发用代理

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