Next.js组件如何将API返回的packages数据传递给卡片组件？

你的核心问题是数据获取逻辑和组件完全脱节——单独执行的test函数里的packages数据，根本没法被CardBox组件访问到。直接把数据获取逻辑移到组件内部，用React状态管理来存数据就能解决，具体实现如下：

完整修改代码 #

import { useState, useEffect } from "react";
import { GetPackages, SetWebstoreIdentifier } from "tebex_headless";

// 商店标识只需要初始化一次，放在组件外即可
SetWebstoreIdentifier("tv5y-6b682b0fe1661c45c836b56fb7244d3d840d18c7");

export function CardBox() {
  // 用状态存储packages数据，默认是空数组
  const [packages, setPackages] = useState([]);
  // 加个加载状态，处理数据未返回时的显示
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // 封装异步函数获取数据
    const fetchPackages = async () => {
      try {
        const data = await GetPackages();
        setPackages(data);
      } catch (err) {
        console.error("获取packages失败:", err);
      } finally {
        setIsLoading(false);
      }
    };

    fetchPackages();
    // 空依赖数组确保只在组件挂载时执行一次API请求
  }, []);

  // 数据加载中时显示占位内容
  if (isLoading) {
    return <div>加载中...</div>;
  }

  return (
    <div className="grid gap-6 place-items-center sm:grid-cols-2 lgg:grid-cols-4">
      {/* 遍历packages数组，把每个package数据传给Card组件 */}
      {packages.map((pkg) => (
        // 必须加唯一key，推荐用package的id，避免React渲染警告
        <Card key={pkg.id} package={pkg} />
      ))}
    </div>
  );
}

// 示例Card组件，通过props接收单个package的数据
function Card({ package }) {
  return (
    <div className="border p-4 rounded-lg">
      <h3 className="font-bold">{package.name}</h3>
      <p className="text-sm text-gray-600">{package.description}</p>
      <div className="mt-2 font-medium">{package.price.formatted}</div>
      {/* 这里可以根据你的需求渲染更多package字段，比如购买按钮等 */}
    </div>
  );
}

关键要点说明 #

1. 状态管理：用useState保存packages数据，数据更新时组件会自动重新渲染
2. 异步数据获取：用useEffect包裹API请求，空依赖数组保证只请求一次，避免重复调用
3. 数据传递：遍历packages数组时，把每个元素作为props传给Card组件，组件直接通过props读取数据即可
4. 加载状态：增加isLoading状态，避免数据未返回时渲染空页面

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