如何在 Next.js 中正确获取并渲染异步 API 数据-js教程-PHP中文网

如何在 Next.js 中正确获取并渲染异步 API 数据

本文详解在 Next.js（App Router 或 Pages Router）中调用异步 API 时，为何直接 await 获取数据会报错，以及如何通过 React 的 useState 和 useEffect 正确管理加载状态、获取并渲染远程产品数据。

本文详解在 next.js（app router 或 pages router）中调用异步 api 时，为何直接 `await` 获取数据会报错，以及如何通过 react 的 `usestate` 和 `useeffect` 正确管理加载状态、获取并渲染远程产品数据。

在你提供的代码中，核心问题在于：getProducts() 是一个 async 函数，调用它会立即返回一个 Promise，而非实际数据。而你在 Homepage 组件中直接将其作为 data prop 传给：

const productsData = getProducts(); // ❌ 返回 Promise，不是对象
return <listproducts data="{productsData}"></listproducts>;

React 渲染器无法直接渲染 Promise 对象，因此控制台报错：
Objects are not valid as a React child (found: [object Promise])。

此外，ListProducts 组件尝试访问 data?.products?.map(...)，但此时 data 是未解析的 Promise，data.products 为 undefined，导致列表不渲染——尽管 console.log(data) 在控制台看似“有值”，那只是 Promise 的 [[PromiseResult]] 展开视图，并非同步可访问的数据结构。

✅ 正确做法是：使用状态 + 副作用钩子（useState + useEffect）进行异步数据获取与响应式更新：

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

// pages/index.js（Pages Router 示例）
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import ListProducts from '@/components/products/ListProducts';

const Homepage = () => {
  const [products, setProducts] = useState(null); // 初始化为 null，便于区分 loading/loaded
  const [loading, setLoading] = useState(true);   // 可选：显式管理加载态
  const [error, setError] = useState(null);       // 可选：错误处理

  const fetchProducts = async () => {
    try {
      setLoading(true);
      const response = await axios.get(`${process.env.API_URL}/api/products`);
      setProducts(response.data); // 注意：axios 返回对象含 .data 字段
    } catch (err) {
      console.error('Failed to fetch products:', err);
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchProducts();
  }, []); // 空依赖数组 → 组件挂载时执行一次

  if (loading) return <div classname="py-12 text-center">Loading products...</div>;
  if (error) return <div classname="py-12 text-red-600 text-center">Error: {error}</div>;
  if (!products || !Array.isArray(products.products)) 
    return <div classname="py-12 text-gray-500 text-center">No products available.</div>;

  return <listproducts data="{products}"></listproducts>;
};

export default Homepage;

⚠️ 关键注意事项：

✅ useEffect 是触发副作用（如数据请求）的唯一合规位置；不能在组件顶层 await。
✅ axios.get(...).data 才是后端返回的实际 JSON 数据（如 { products: [...] }），而非整个响应对象。
✅ ListProducts 必须是 Client Component（已用 "use client" 标注），因 useState/useEffect 仅在客户端运行。
✅ 建议添加加载态（loading）、错误态（error）和空数据态处理，提升用户体验与健壮性。
? 避免在服务端（如 getServerSideProps 或 generateStaticParams）中混用客户端 hooks；若需 SSR/SSG，请改用 Next.js 数据获取函数（如 getStaticProps）。

最后，确保 ListProducts 正确解构数据：

// components/products/ListProducts.jsx
"use client";
import React from "react";
import Filters from "./Filters";
import ProductItem from "./ProductItem";

const ListProducts = ({ data }) => {
  // data 应为 { products: [...] }
  const products = data?.products || [];

  return (
    <section classname="bg-green-50 py-12"><article classname="max-w-screen-3xl mx-auto px-4 flex"><filters></filters><article classname="grid grid-cols-2 gap-4">
          {products.map((product) => (
            <productitem key="{product._id}" product="{product}"></productitem>
          ))}
        </article></article></section>
  );
};

export default ListProducts;

总结：异步数据 ≠ 同步值。React 组件必须通过状态驱动渲染，而 useEffect + useState 是协调异步副作用与 UI 更新的标准范式。掌握这一模式，是构建可靠数据驱动应用的基础。