本文详解在 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 传给 <ListProducts />：
const productsData = getProducts(); // ❌ 返回 Promise，不是对象
return <ListProducts data={productsData} />;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）进行异步数据获取与响应式更新：
// 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} />;
};
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 />
<article className="grid grid-cols-2 gap-4">
{products.map((product) => (
<ProductItem key={product._id} product={product} />
))}
</article>
</article>
</section>
);
};
export default ListProducts;总结：异步数据 ≠ 同步值。React 组件必须通过状态驱动渲染，而 useEffect + useState 是协调异步副作用与 UI 更新的标准范式。掌握这一模式，是构建可靠数据驱动应用的基础。
