Next.js 13+React中用use()传对象数据遇undefined问题排查

1. 未解析API响应为JSON #

在page.tsx的search函数中，你直接返回了fetch得到的Response对象，而非解析后的JSON数据。React的use()钩子拿到的是未解析的响应对象，自然不存在results属性。

修复代码：

async function search() {
  let res = await fetch(`http://api:port/search`);
  // 调用json()解析响应内容为JSON格式
  return res.json();
}

2. 组件内错误访问数据结构 #

API返回的是数组（[{"category": {}, "results": [...]}]），但你在SearchResults组件中错误尝试访问data.response（实际不存在该层级），同时props的类型定义也与实际数据不匹配。

修复类型定义： #

export interface SearchResultsProps {
  // 改为API返回的数组类型，即Response[]
  data: Response[];
}

// 同步调整Response接口，匹配API返回的category结构（API返回的是对象，原定义为string错误）
export interface Response {
  category: Record<string, any>; // 或根据实际结构定义具体字段
  results: SearchResult[];
}

修复组件内的数据遍历逻辑： #

const SearchResults = ({ data }: SearchResultsProps) => {
  return (
    <>
      {/* 直接遍历data数组，而非不存在的data.response */}
      {data.map((i, index) => ( 
        <div key={index}>
          {/* 根据API返回的category对象实际字段取值，比如i.category.name */}
          <h2>{i.category?.name}</h2>
          {i.results.map((r, resultIndex) => (
            <SearchCard
              key={`result.${index}.${resultIndex}`}
              skillName={r.skillName}
              {...}
            />
          ))}
        </div>
      ))}
    </>
  );
};

3. 额外优化点 #

Next.js 13的Server Components支持直接编写异步函数，无需使用React的use()钩子，可简化page.tsx代码：

export default async function Results() {
  let searchResults = await search();
  return <SearchResults data={searchResults} />;
}

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