• 使用带有Next.JS 13的React *

我尝试从API获取数据并将其传递给组件，然后组件通过它进行Map并显示。
API返回一个对象数组：

[
    {
        "category": {},
        "results": [{...}]
    }
]

我想获取的页面.tsx包含以下（简化的）结构：

import SearchResults from "./SearchResults.tsx";
import { use } from "react";

async function search() {
  let res = await fetch(`http://api:port/search`);
  return res;
}

export default function Results({ data }) {
  let searchResults = use(search());

  return <SearchResults data={searchResults} />;
}

我已经去除了类型、接口和不相关的内容。
对于组件文件，我们有：

export interface SearchResult {
  skillName: string;
  ...}

export interface Response {
  category: string;
  results: SearchResult[];
}

export interface SearchResultsProps {
  data: [];
}

const SearchResults = ({ data }: SearchResultsProps) => {
  return (
      {data.response.map((i, index) => ( 
        <div key={index}>
          <h2>{i.category}</h2>
          {i.results.map((r, resultIndex) => (
            <SearchCard
              key={`result.${index}.${resultIndex}`}
              skillName={r.skillName}
              ...
            />
          ))}
        </div>
     ))}
  );
};

export default SearchResults;

我尝试用几种不同的方法将响应绑定到data，但是组件总是声明data.results是未定义的。检查浏览器中的网络选项卡（当我将“use client”添加到代码中时）显示API返回正确的数据。我做错了什么？
PS：我用完整的文件版本做了一个pastebin，以防我剪掉一些重要的东西。