2

我以前读过这个问题，其中许多似乎是一个导入问题，但我不确定我的情况。我正在按照教程学习反应查询，我仔细检查了源代码，制作教程的人没有问题。

引发错误的代码：

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
4

1 回答 1

2

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

于 2021-01-23T22:21:19.013 回答