如何使用我的 Typescript NextJS 代码访问我的 Express API？

Question

我正在尝试从返回以下 JSON 的 API 获取数据：

[
  { project: "Challenges_jschallenger.com" },
  { project: "Using-Studio-Ghilis-API-With-JS-Only" },
  { project: "my-portfolio-next" },
  { project: "Youtube-Navbar-2021" },
  { project: "Mana-raWozonWebsite" },
  { project: "Movies-Website" },
  { project: "Add-Remove-Mark-and-Mark-off-With-ReactJS" },
  { project: "My-Portfolio" },
  { project: "Github_Explorer" },
  { project: "MestreALMO.github.io" },
  { project: "Tests-With-useState-useEffect-useRef" },
  { project: "Tic-Tac-Toe-React-in-JS" },
  { project: "ReactJS-with-TypeScript-Template" },
  { project: "Retractable-Accordion" },
]

我正在尝试在下面的 NextJS 代码中使用它：

export const getStaticProps = async () => {
  const res = await fetch("http://localhost:3100/");
  const data = await res.json();

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

interface interfaceProjects {
  project: string;
}

const Landing = (projects: interfaceProjects) => {
  return (
    <>
      <h1>Hello World</h1>
      {console.log(projects)}
      {/* {projects.map((project) => (
        <h3>project</h3>
      ))} */}
    </>
  );
};

export default Landing;

我的projects.map 返回错误：TypeError: projects.map is not a function。所以我对console.log(projects) 进行了编码，它返回为空。我该如何解决这个问题，以便projects.map 开始工作？我做错了什么？

如果有人想查看代码的运行情况，我为此代码创建了一个 github 页面。该 API 位于 express-api 文件夹中。 https://github.com/MestreALMO/NextJS-Testing-Express-API

Answer 1

我最终让它在这里工作是解决方案的完整代码：

import { InferGetStaticPropsType } from "next";

type Post = {
  project: string;
};

export const getStaticProps = async () => {
  const res = await fetch("http://localhost:3100/");
  const posts: Post[] = await res.json();

  return {
    props: {
      posts,
    },
  };
};

function Blog({ posts }: InferGetStaticPropsType<typeof getStaticProps>) {
  return (
    <>
      <h3>Hi</h3>
      {console.log(posts)}
    </>
  );
}

export default Blog;

Answer 2

除了类型之外，您的 Landing 函数实际上接收的是 props，而不是 projects。这是一个详细的示例如何获取projects：

const Landing = (props) => {

  const projects = props.projects;
  console.log(projects); // This logs to the server console

  return (
    <>
      <h1>Hello World</h1>

      {/* This logs to the browser console */}
      {console.log(projects)}

    </>
  );
};

但是，您仍然应该在控制台中看到 props 对象。确保您查看的是正确的，因为在您的代码中您是在客户端登录。

Answer 3

变化：

const Landing = (projects: interfaceProjects) => {

收件人：

const Landing = (projects: interfaceProjects[]) => {

修复类型错误。

getStaticProps 函数也被调用过吗？