javascript - 打开下拉菜单时多次调用 React useQuery

Question

我正在使用“react-query”从组件调用 API。出于这个问题的目的，我从 API 返回一个模拟响应。

每次我打开下拉菜单时，都会调用 useQuery 函数，该函数又会调用模拟 API。

App.js

import React from 'react';
import './style.css';
import { QueryClient, QueryClientProvider } from 'react-query';
import { DropDown } from './Dropdown.js';
const queryClient = new QueryClient();
export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <div style={{ display: 'flex', justifyContent: 'center' }}>
        <DropDown />
      </div>
    </QueryClientProvider>
  );
}

下拉.js

import React from 'react';
import { useQuery } from 'react-query';

export const DropDown = () => {
  console.log('DropDown re-rendered');

  const { data, isLoading, isError } = useQuery('API', () => {
    return new Promise((resolve, reject) => {
      console.log('API called');
      resolve(['mockData']);
    });
  });

  return (
    <>
      <select>
        <option> 1 </option>
        <option> 2 </option>
      </select>
    </>
  );
};

您可以在这里找到演示:https://react-quxtxd.stackblitz.io

在控制台中，您会看到每次打开下拉菜单时都会调用 useQuery。

Stackblitz 编辑器网址:https://stackblitz.com/edit/react-quxtxd?file=src/Dropdown.js

作为避免这种情况的替代方法，我可以使用传统的 useEffect 进行 API 调用，但我一直在考虑利用 useQuery 提供的缓存优势，但由于这个“重新呈现”问题而被卡住了。

有什么建议/修改吗？

Answer 1

这对我有用

{ refetchOnWindowFocus: false }

用法:

const { data, status } = useQuery("users", fetchUsers, { 
    refetchOnWindowFocus: false 
});