Как решить ошибку при передаче переменной в асинхронную функцию?

Question

Я пытаюсь передать номер страницы в функции (fetchPlanets)

поставил, он получает следующую ошибку

вот код

как вы можете видеть, страница переменной в асинхронной функции дает значение undefined

Answer 1

При использовании queryKeys вам необходимо деструктурировать свойство из аргументов функции сборщика:

      const fetcher = ({ queryKey )) => {...};

или же

      const fetcher = props => {
  const { queryKey } = props;
  ...etc
}

Затем вы можете использовать клавиши в зависимости от их положения:

      // queryKeys: ["planets", 1]

const [category, page] = queryKeys;

const res = await fetch(`https://swapi.dev/api/${category}/?page=${page}`);

Рабочий пример :

---

Planets.js

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

const fetchPlanets = async ({ queryKey }) => {
  const [category, page] = queryKey;
  const res = await fetch(`https://swapi.dev/api/${category}/?page=${page}`);
  return res.json();
};

const Planets = () => {
  const [page, setPage] = useState(1);

  const { data, status } = useQuery(["planets", page], fetchPlanets);

  return (
    <div className="app">
      <h2>Planets</h2>

      <button onClick={() => setPage(1)}>Page 1</button>
      <button onClick={() => setPage(2)}>Page 2</button>
      <button onClick={() => setPage(3)}>Page 3</button>

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

      {status === "error" && <div>Error Fetching Data</div>}

      {status === "success" && (
        <pre className="code">{JSON.stringify(data.results, null, 4)}</pre>
      )}
    </div>
  );
};
export default Planets;

index.js

      import { StrictMode } from "react";
import ReactDOM from "react-dom";
import { QueryClient, QueryClientProvider } from "react-query";
import Planets from "./Planets";
import "./styles.css";

const queryClient = new QueryClient();

ReactDOM.render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <Planets />
    </QueryClientProvider>
  </StrictMode>,
  document.getElementById("root")
);