React Hooks и React Query (useQuery): вызов вызова / запроса API только при нажатии кнопки

Я работаю над проектом React JS. Я использую React Hooks (функциональные компоненты) и React query.

Обычно я запускаю / выполняю запрос, как показано в функциональном компоненте.

const ItemList = (props) => {
  let getItemsQuery = useQuery([ 'get-items' ], getItems, {
    retry: false,
    refetchOnWindowFocus: false
  });

  // The rest of the code goes here
}

В основном запрос выполняется при загрузке компонента, поэтому также выполняется вызов API.

Теперь я ищу способ, при котором я могу выполнять запрос только при нажатии кнопки.

return (
   <button onClick={() => {
       //make the call. The value or value might be overridden when the API call is made when the Call 2 button is clicked
    }}>Call 1</button>
   <button onClick={() => {
       //make the call. The value or value might be overridden when the API call is made when the Call 1 button is clicked
    }}>Call 2</button>
)

Как вы можете видеть в фиктивном коде выше, комментарий объясняет, чего я хочу достичь. Как я могу это сделать?


reactjs react-hooks react-query
person Wai Yan Hein    schedule 10.11.2020    source источник
comment
Итак, когда кнопка нажата, выполняется запрос, остановится ли запрос, если кнопку снова щелкнуть?   -  person yudhiesh    schedule 10.11.2020
comment
Он сделает еще один запрос.   -  person Wai Yan Hein    schedule 10.11.2020
comment
Отвечает ли это на ваш вопрос? React-Query: как использовать запрос при нажатии кнопки   -  person jack.benson    schedule 10.11.2020
comment
Но что, если я хочу передать другой параметр при нажатии кнопки?   -  person Wai Yan Hein    schedule 10.11.2020

Ответы (1)


arrow_upward
3
arrow_downward

Получение из этого ответа:

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

const App = (props) => {
  const [text, setText] = useState("");

  // use your async request (axios, fetch, etc)
  // useQuery expects a Promise so we can safely use this instead
  const emulateFetch = async (_) => {
    // axios.get (...)
    console.log(`Passing ${text} to fetch`);
    return new Promise((resolve) => {
      resolve([{ data: "ok" }]);
    });
  };

  const handleClick = () => {
    // manually refetch
    refetch();
  };

  const { isLoading, error, data, refetch } = useQuery(
    ["key", { text }],
    emulateFetch,
    {
      refetchOnWindowFocus: false,
      enabled: false // needed to handle refetchs manually
    }
  );

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <p>Home page</p>
      <input
        type="text"
        value={text}
        onChange={(event) => setText(event.target.value)}
      />
      <button onClick={handleClick}>Click me</button>
      {JSON.stringify(data)}
    </div>
  );
};

export default App;

Рабочая песочница.

person jack.benson    schedule 10.11.2020
comment
Но что, если я хочу снова выполнить запрос с другим параметром при нажатии кнопки? - person Wai Yan Hein; 10.11.2020
comment
Похоже, вы можете справиться с этим в своей функции запроса. Посмотрите этот пример: codeandbox.io/s/fervent- wiles-tgy5p? file = / src / App.js. - person jack.benson; 10.11.2020
comment
Это то, что мне нужно. Ваше здоровье. - person Wai Yan Hein; 10.11.2020
comment
Но что я не хочу выполнять, когда компонент загружен, а я только когда выполняю его при нажатии кнопки? - person Wai Yan Hein; 10.11.2020
comment
Я обновил свой пример чем-то, что, как мне кажется, делает все, что вы хотите. Проверьте это: codeandbox .io / s / reactquery-manual-refetch-forked-3tlxj? file = / - person jack.benson; 10.11.2020
comment
Идеально. Это то, что мне нужно. Спасибо. - person Wai Yan Hein; 11.11.2020