我有一个简单的虚拟API，它返回一个对象数组，例如：

// api/projectsdata.js

    export default function handler(req, res) {
      res.status(200).json([{...},{...},{...}]
    }

字符串
我的fetch API看起来像这样：

import { useEffect, useState } from "react";

const ProjectsUtil = () => {
  const [data, setData] = useState(null);

  const fetchData = async () => {
    try {
      const response = await fetch("http://localhost:3000/api/projectsdata");
      const data = await response.json();

      if (response.ok) {
        setData(data);
      }
    } catch (error) {
      throw new Error(error);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  return data !== null && data;
};

export default ProjectsUtil;

型
我尝试使用下面的两个辅助函数来获取：

export const getAllProjects = () => {
  const data = ProjectsUtil();
  return data;
};

export const getProjectByName = (name) => {
  const data = getAllProjects();
  return data.filter((project) => project.name === name);
};

型
在另一个组件中，我尝试预取和使用数据，例如：

const SingleProjectDetails = (props) => {
  return <ProjectDetails props={props.projectData[0]} />;
};

export function getStaticProps(context) {
  const { params } = context;
  const { id } = params;
  const projectData = getProjectByName(id);

  return {
    props: {
      projectData: projectData,
    },
    revalidate: 600,
  };
}

export function getStaticPaths() {
  const projectsData = getAllProjects();

  return {
    paths: projectsData.map((project) => ({
      params: {
        id: project.name,
      },
    })),
    fallback: true,
  };
}

型
我得到一个错误：TypeError: Cannot read properties of null (reading 'useState')的。
令人困惑的是，我的抓取API函数在其他组件中工作得很好。另外，如果我将虚拟数据初始化为对象的普通数组，而不是来自API的调用，则一切正常。有什么问题吗？是否不允许预取API？