TypeError: Object(...)不是带有react-query的函数

Question

我以前读过这个问题，其中许多似乎是一个引入问题，但我不确定在我的情况下。我正在学习关于react query的教程，我仔细检查了源代码，编写教程的人没有这个问题。

引发错误的代码：

import React, { useState } from "react";
import { usePaginatedQuery } from "react-query";
import Planet from "./Planet";

const fetchPlanets = async (key, page) => {
  const res = await fetch(`http://swapi.dev/api/planets/?page=${page}`);
  return res.json();
};

const Planets = () => {
  const [page, setPage] = useState(1);
  const { resolvedData, latestData, status } = usePaginatedQuery(
    ["planets", page],
    fetchPlanets
  );

  return (
    <div>
      <h2>Planets</h2>

      {status === "loading" && <div>Loading data</div>}

      {status === "error" && <div>Error fetching data</div>}

      {status === "success" && (
        <>
          <button
            onClick={() => setPage((old) => Math.max(old - 1, 1))}
            disabled={page === 1}
          >
            Previous Page
          </button>
          <span>{page}</span>
          <button
            onClick={() =>
              setPage((old) =>
                !latestData || !latestData.next ? old : old + 1
              )
            }
            disabled={!latestData || !latestData.next}
          >
            Next page
          </button>
          <div>
            {resolvedData.results.map((planet) => (
              <Planet key={planet.name} planet={planet} />
            ))}
          </div>
        </>
      )}
    </div>
  );
};

export default Planets;

错误：

TypeError: Object(...) is not a function
Planets
src/components/Planets.jsx:12
   9 | 
  10 | const Planets = () => {
  11 |   const [page, setPage] = useState(1);
> 12 |   const { resolvedData, latestData, status } = usePaginatedQuery(
  13 |     ["planets", page],
  14 |     fetchPlanets
  15 |   );

我在这里做错了什么?为什么会产生这个错误？

控制台给了我一些我不了解的信息

react-refresh-runtime.development.js:315 Uncaught TypeError: Object(...) is not a function
    at Planets (Planets.jsx:12)
    at renderWithHooks (react-dom.development.js:14985)
    at mountIndeterminateComponent (react-dom.development.js:17811)
    at beginWork (react-dom.development.js:19049)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
    at renderRootSync (react-dom.development.js:22670)
    at performSyncWorkOnRoot (react-dom.development.js:22293)
    at react-dom.development.js:11327
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at flushSync (react-dom.development.js:22467)
    at Object.scheduleRoot (react-dom.development.js:24444)
    at react-refresh-runtime.development.js:284
    at Set.forEach (<anonymous>)
    at Object.performReactRefresh (react-refresh-runtime.development.js:263)
    at RefreshUtils.js:62

Answer 1

我认为这仍然是一个重要的问题。usePaginatedQuery已在v3中删除，因此请确保在使用v2时使用它，或者遵循迁移指南：https://react-query.tanstack.com/guides/migrating-to-react-query-3#usepaginatedquery-has-been-deprecated-in-favor-of-the-keeppreviousdata-option