React useQuery 钩子一直在组件内运行答案

【问题标题】：React useQuery hook running all the time inside the componentReact useQuery 钩子一直在组件内运行
【发布时间】：2021-08-06 18:32:27
【问题描述】：

我有一个问题，useQuery 总是在我的应用程序中运行，我不知道为什么

在我的组件中

import { GET_DATA } from 'apiCalls';
const {  loading, error, data } = useQuery('getData', GET_DATA(token));

在我的 api 调用中

export const GET_DATA = async (token) => {
try {
    const res = await axios.get(`${process.env.REACT_APP_SERVER}/api/...`, {
        headers: {'auth-token': token},
    });
    console.log(res);
    return res.data;
} catch (err) {
    console.log('Error getting data');
    return err;
}

}

当我调试我的应用程序时。 GET_DATA 函数始终在运行。这里有什么问题？

【问题讨论】：

我认为在您的应用程序中的某些时候您正在使用 useEffect 并且在 useEffect 内部您正在做一些使组件重新呈现的事情。如果您提供有关您在其中使用 GET_DATA 的组件的更多信息，我可以告诉您问题出在哪里。
我的组件中甚至没有 useEffect @Ako
我检查了我的组件，问题是 useQuery 100%，因为当我评论它时，组件停止总是重新渲染@Ako
你不能调用useQuery里面的函数。我写答案如何使用它。

标签： javascript reactjs react-query

【解决方案1】：

你必须只提供useQuery它想运行的函数，你不能在useQuery中调用它。以这种方式将令牌提供给 GET_DATA：

编辑

正如@tkdodo 所说，我们不需要使用异步功能。

const {  loading, error, data } = useQuery('getData', ()=>{
   return GET_DATA(token);
});

我提供的第一个解决方案是这样的：

const {  loading, error, data } = useQuery('getData', async()=>{
   const data = await GET_DATA(token);
   return data;
});

【讨论】：

与() => GET_DATA(token)相比，这种语法没有必要复杂化
@TkDodo 是的，你是对的，我们不需要使用异步函数。

【解决方案2】：

根本原因与React-Query, useQuery returns undefined only after loading is complete中的相同

queryFn 必须是一个返回承诺的函数。 GET_DATA 这样做。但是通过做

GET_DATA(token)你直接调用函数。所以你可能会想要：

改为() => GET_DATA(token)。

【讨论】：

【解决方案3】：

尝试以下方法：

// apiCalls.js
export const getData = async (token) => {
  try {
    const res = await axios.get(`${process.env.REACT_APP_SERVER}/api/...`, {
        headers: {'auth-token': token},
    });
    return res.data;
  } catch (err) {
    console.log('Error getting data');
    return err;
}

// Component.js
import { getData } from 'apiCalls';

function Component(){
  const {  loading, error, data } = useQuery(
    'getData', 
    ()=>GET_DATA(token)
  );

  return (
    <div>...</div>
  )
}

useQuery应该在组件中运行，第二个参数不应该是promise，而是一个返回promise的函数。

【讨论】：