如何在使用反应查询获取数据时禁用元素？

Question

我的应用程序使用 React Hook Form 和 React-Query 从 id 的 api 中获取一个字符。 id 可以是用户的输入，也可以是随机生成的。

当用户进行第一次查询时，我想在抓取时禁用 input、fetch 按钮和 random 按钮。如果当前加载了与 input 字段中的数字对应的字符，我还希望禁用 fetch 按钮和 random 按钮，以便之后进行任何查询。

我尝试实现 React Hooks Form 的 formState.isSubmitting 和 formState.isDirty，但输入和按钮没有被禁用。

请让我知道如何实现预期的行为。

Answer 1

I want to disable the input, fetch button, and random button while fetching.

因为你依赖react-query获取数据，你需要引用isLoading状态来相应地渲染UI，每次用户提交表单，更新idQuery 再次触发抓取。因为您是通过 ID 获取的，所以您应该使用 array keys 而不是字符串键。

这里有一个最小的例子来说明我的意思：

const { register, handleSubmit } = useForm();
const [idQuery, setIdQuery] = useState(0);
const handleRickAndMortyFetch = () => {
  return axios(`https://rickandmortyapi.com/api/character/${idQuery}`)
    .then((res) => res.data);
};
const { isLoading, data, error } = useQuery(
  ["rickandmorty", idQuery],
  handleRickAndMortyFetch
);
const disable = isLoading;
const onSubmit = (formData) => {
  setIdQuery(formData.rickAndMortyId);
};

return (
  <>
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="rickAndMortyId" ref={register} disabled={disable} />
      <button type="submit" disabled={disable}>
        Search Character
      </button>
    </form>
    <RickAndMortyInfo data={data} />
  </>
);

I also want the fetch button and random button to be disabled if the character corresponding to the number in the input field is currently loaded

这在react-hook-form中可以轻松实现，您只需要使用watch监听包含ID的输入的值，并将其与当前idQuery进行比较:

const { watch, ... } = useForm();
const formId = watch("rickAndMortyId");
const { isLoading, data, error } = useQuery(
  ["rickandmorty", idQuery],
  handleRickAndMortyFetch
);
const disable = isLoading || parseFloat(formId) === idQuery;

另请注意，您不必禁用当前所选 ID 的搜索按钮，因为 react-query caches 您最近获取的结果是开箱即用的。如果您再次搜索最近的 ID，它会跳过获取过程并为您提供缓存结果。

如何在使用反应查询获取数据时禁用元素？

How to disable elements while fetching data with react-query?

reactjs

react-hooks

react-hook-form

react-query

现场演示