无法复制 react-table CodeSandbox：本地主机上的 API 错误

Question

我正在尝试将 this 以下 CodeSandbox 项目集成到我自己的项目中。但是，在导航到 Example 组件后，我收到 404 错误：Error: Request failed with status code 404。 API 正在查询以下端点：http://localhost:3000/api/projects?cursor=0，但该端点没有 return 任何内容。

为了完整起见，这里是包含我的组件的代码。我排除了 QueryClientProvider 因为它已经存在于我的 index.js.

import React from "react";
import { Link } from "react-router-dom";
import axios from "axios";
import { useInfiniteQuery } from "react-query";

import useIntersectionObserver from "./hooks/useIntersectionObserver";

export default function Example() {
  const {
    status,
    data,
    error,
    isFetching,
    isFetchingNextPage,
    isFetchingPreviousPage,
    fetchNextPage,
    fetchPreviousPage,
    hasNextPage,
    hasPreviousPage,
  } = useInfiniteQuery(
    "projects",
    async ({ pageParam = 0 }) => {
      const res = await axios.get("/api/projects?cursor=" + pageParam);
      return res.data;
    },
    {
      getPreviousPageParam: (firstPage) => firstPage.previousId ?? false,
      getNextPageParam: (lastPage) => lastPage.nextId ?? false,
    }
  );

  const loadMoreButtonRef = React.useRef();

  useIntersectionObserver({
    target: loadMoreButtonRef,
    onIntersect: fetchNextPage,
    enabled: hasNextPage,
  });

  return (
    <div>
      <h1>Infinite Loading</h1>
      {status === "loading" ? (
        <p>Loading...</p>
      ) : status === "error" ? (
        <span>Error: {error.message}</span>
      ) : (
        <>
          <div>
            <button
              onClick={() => fetchPreviousPage()}
              disabled={!hasPreviousPage || isFetchingPreviousPage}
            >
              {isFetchingNextPage
                ? "Loading more..."
                : hasNextPage
                ? "Load Older"
                : "Nothing more to load"}
            </button>
          </div>
          {data.pages.map((page) => (
            <React.Fragment key={page.nextId}>
              {page.data.map((project) => (
                <p
                  style={{
                    border: "1px solid gray",
                    borderRadius: "5px",
                    padding: "10rem 1rem",
                    background: `hsla(${project.id * 30}, 60%, 80%, 1)`,
                  }}
                  key={project.id}
                >
                  {project.name}
                </p>
              ))}
            </React.Fragment>
          ))}
          <div>
            <button
              ref={loadMoreButtonRef}
              onClick={() => fetchNextPage()}
              disabled={!hasNextPage || isFetchingNextPage}
            >
              {isFetchingNextPage
                ? "Loading more..."
                : hasNextPage
                ? "Load Newer"
                : "Nothing more to load"}
            </button>
          </div>
          <div>
            {isFetching && !isFetchingNextPage
              ? "Background Updating..."
              : null}
          </div>
        </>
      )}
      <hr />
      <Link href="/about">
        <a>Go to another page</a>
      </Link>
    </div>
  );
}

问题可能源于 project.js 文件，我未对其进行任何更改。我应该在我的 React 应用程序中以某种方式运行连接这个端点，还是应该使用 react-scripts start 自动运行？或者这是 next.js 特有的问题？

Answer 1

您所关注的示例使用的是 nextJS，它具有内置的 HTTP 服务器。由于您正在导入 react-router-dom 我假设您没有使用 Next。

不幸的是，这不适用于 create-react-app（我再次假设您正在使用它。）您要么必须转移到 NextJS，其他一些 SSR 反应框架，要么只是旋转在另一个端口上建立一个 HTTP 服务器，该服务器将监听您正在进行的 API 调用。

无法复制 react-table CodeSandbox：本地主机上的 API 错误

Unable to replicate react-table CodeSandbox: API error on localhost

javascript

reactjs

react-native

codesandbox

react-table