如何在Next.js中重用函数服务

cpjpxq1n 于 2023-11-18 发布在其他

关注(0)|答案(1)|浏览(83)

我是Next.js的新手，我喜欢将我的API函数拆分到一个名为services的单独文件夹中。我尝试基于此topic编写一些代码，但它不起作用。我认为我的API函数永远不会调用。我得到这个错误：

Unhandled Runtime Error
TypeError: data is undefined

字符串
这是我的代码
index.tsx文件：

import ShowResult from '../components/showResult'

export default function Home() {
  return (
    <div className='container mx-auto'>      
      <ShowResult />
    </div>
  );
}

型
components/showResult.tsx文件：

import getUserRepos from '../services/api.service'

export async function getStaticProps() {
  const data = await getUserRepos();

  if (!data) {
    return {
      notFound: true,
    };
  }

  return {
    props: {
      data,
    },
  };
}

export default function ShowResult({data}) {
  return (
    <div className=''>
      <p>Result :</p>
      <ul>
        {data.map((repo) => (
          <li key={repo.id}>{repo.name}</li>
        ))}
      </ul>
    </div>
  )
}

型
services/api.service.ts文件：

export async function getUserRepos() {
  const response = await fetch(
    `https://api.github.com/users/abdurrahmanseyidoglu/repos`
  );
  const data = await response.json();
  return data;
}

型
a如何从我的API服务函数中获取数据？

next.js

来源：https://stackoverflow.com/questions/77436460/how-to-reuse-functions-service-in-next-js

1条答案

按热度按时间

vptzau2j1#

首先，您需要将getStaticProps移动到您的页面，然后将数据作为 prop 传递给ShowResult组件。然后更改ShowResult组件以接受数据作为 prop 并呈现它。
试试这个：
pages/index.tsx：

import ShowResult from '../components/ShowResult';
import { getUserRepos } from '../services/api.service';

export async function getStaticProps() {
  const data = await getUserRepos();

  if (!data) {
    return {
      notFound: true,
    };
  }

  return {
    props: {
      data,
    },
  };
}

export default function Home({ data }) {
  return (
    <div className='container mx-auto'>      
      <ShowResult data={data} />
    </div>
  );
}

字符串
components/ShowResult.tsx：

export default function ShowResult({ data }) {
  if (!data) {
    return <div>No data to display.</div>;
  }

  return (
    <div className=''>
      <p>Result:</p>
      <ul>
        {data.map((repo) => (
          <li key={repo.id}>{repo.name}</li>
        ))}
      </ul>
    </div>
  );
}

型
services/API.service.ts（未更改）：

export async function getUserRepos() {
  const response = await fetch(
    `https://api.github.com/users/abdurrahmanseyidoglu/repos`
  );
  if (!response.ok) {
    throw new Error(`Failed to fetch repos, received status ${response.status}`);
  }
  const data = await response.json();
  return data;
}

型

赞(0）回复(0）举报 2023-11-18

我来回答

如何在Next.js中重用函数服务

1条答案

相关问题

热门标签

最新问答