如何在 React 中逐条渲染 API 返回的多个数据项-js教程-PHP中文网

如何在 React 中逐条渲染 API 返回的多个数据项

本文讲解如何将 api 获取的数组数据逐条传递给子组件并渲染，核心是使用 map 方法遍历数据，在父组件中为每个数据项动态创建子组件实例，并正确传递字段（如 title、description）作为 props。

在 React 中，当从 API（例如 https://dummyjson.com/posts）获取到一个包含多个对象的数组（如 data.posts）时，若希望每个对象独立渲染为一个卡片组件（如 Carts），不能直接将整个数组传给单个组件实例——那样会导致 props 解构失败或渲染逻辑混乱。正确的做法是在父组件中对数据数组执行 .map()，为每一项生成一个独立的组件，并将当前项（如 data.title、data.body）作为具体属性传入。

首先，修正 ApiRequest 组件：移除将整个数组传给单个的写法，改用 map 渲染列表：

import React, { useEffect } from 'react';
import { useState } from 'react';
import Carts from './Carts/Carts';

export default function ApiRequest() {
  const [dataApi, setDataApi] = useState([]);

  useEffect(() => {
    const fetchApi = async () => {
      try {
        const response = await fetch('https://dummyjson.com/posts');
        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
        const data = await response.json();
        setDataApi(data.posts || []);
      } catch (err) {
        console.error('API fetch failed:', err);
      }
    };

    fetchApi();
  }, []);

  return (
    <div classname="api-container">
      {dataApi.length > 0 ? (
        dataApi.map((post, index) => (
          <carts key="{post.id" index id title="{post.title}" description="{post.body}"></carts>
        ))
      ) : (
        <p>Loading posts...</p>
      )}
    </div>
  );
}

接着，同步更新 Carts 组件，使其接收解构后的 title 和 description（而非整个 data 对象），提升可读性与类型安全：

react-modernization

将 React 应用升级到最新版本，从类组件迁移到 Hooks，并采用并发特性。用于现代化改造 React 代码库、迁移到 React Hooks 或升级到最新

下载

import React from 'react';

export default function Carts({ title, description, id }) {
  // 可选：添加基础校验
  if (!title || typeof title !== 'string') {
    console.warn(`Carts received invalid title for id=${id}`);
    return null;
  }

  return (
    <div classname="container">
      <div classname="card-header">
        <div classname="cart-items">
          {/* 此处可补充动态图片逻辑，例如 post.coverImage */}
          @@##@@
          <div classname="cart-head">
            <h1>{title}</h1>
          </div>
          <div classname="cart-content">
            <p>{description}</p>
          </div>
        </div>
      </div>
    </div>
  );
}

✅ 关键要点总结：

✅ 必须使用 key 属性：React 要求列表渲染时每个元素有稳定唯一的 key，优先使用 API 返回的 id（如 post.id），避免仅依赖 index（可能导致状态错乱）；
✅ props 解构要精准：子组件应明确接收所需字段（title, description），而非整个数据对象，便于维护和 TypeScript 类型定义；
✅ 增加加载与错误边界：实际项目中建议添加 loading 状态、空数据提示及错误 fallback UI；
✅ 注意 API 响应结构：dummyjson.com/posts 返回的是 { posts: [...] }，确保取值路径正确（即 data.posts）。

通过以上改造，即可实现“一条 API 数据 → 一个卡片组件”的清晰映射关系，满足逐条展示需求。