reactjs - 如何解决将变量提供给异步函数的错误？

Question

我试图在（fetchPlanets）函数中传递页码

把它得到以下错误

这是代码

import React, { useState } from 'react'
import { useQuery } 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 { data, status } = useQuery(['planets', page], fetchPlanets)

    return (
        <div>
            <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' && (
                <div>
                    {data.results.map(planet => <Planet planet={planet} key={planet.name} />)}
                </div>
            )}
        </div>
    )
}
export default Planets

如您所见，异步函数中的变量 page 给出的值未定义

标签： reactjswebasync-awaitreact-querybatch-fetching

Answer 1

使用queryKeys时，您需要从 fetcher 函数参数中解构属性：

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}`);

工作示例：

---

行星.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")
);