reactjs react-query返回未定义

pod7payv 于 2023-03-29 发布在 React

关注(0)|答案(2)|浏览(150)

我正在使用react 18.2和redux toolkit以及react-query。
我的代码设置如下，但是我得到了react-query中的数据返回为undefined。
不过，我确实在Chrome浏览器中检查网络选项卡时得到了响应。
第一次实现react-query。我做错了什么？

索引.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import persistStore from 'redux-persist/es/persistStore';
import { QueryClient, QueryClientProvider } from 'react-query';
import App from './App';
import reportWebVitals from './reportWebVitals';
import store from './redux/store';
import './i18n';

const persistor = persistStore(store);

const queryClient = new QueryClient();

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <PersistGate persistor={persistor}>
      <QueryClientProvider client={queryClient}>
        <App />
      </QueryClientProvider>
    </PersistGate>
  </Provider>,
);

reportWebVitals();

应用程序js

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

import logo from './logo.svg';
import './App.css';

function App() {
    const { isLoading, error, data } = useQuery('repoData', async () => {
        const { data } = await axios.get('https://api.github.com/repos/tannerlinsley/react-query');
        return data;
    });

    if (isLoading) {
        return <>Loading</>
    }

    if (error) {
        return <>Error</>
    }
    console.log(data);
    return (
        <pre>{JSON.stringify(data)}</pre>
    );
}

export default App;

reactjs

来源：https://stackoverflow.com/questions/72846715/react-query-returns-undefined

2条答案

按热度按时间

kkbh8khc1#

代替此代码

const { data } = await axios.get('https://api.github.com/repos/tannerlinsley/react-query');
return data;

用这种方式

const data  = await axios.get('https://api.github.com/repos/tannerlinsley/react-query');
return data;

赞(0）回复(0）举报 2023-03-29

q3aa05252#

修复：

您需要重命名从查询中提取的data变量：

const { isLoading, error, data: repoData } = useQuery(['repoData'], fetchData);

注意，我已经提取了传递给fetchData查询的函数，但它保持不变。您可以根据自己的意愿命名变量。
这是一个与变量命名有关的范围问题。在代码中，您正在使用相同的变量名data解构Axios响应和React Query响应。这似乎使变量冲突。

提示：

我想建议你使用@tanstack/react-query，因为它是推荐的。请注意，如果你这样做，查询键然后作为数组传递，所以你需要修改你的查询如下：

const { isLoading, error, data } = useQuery(['repoData'], async () => {
  const response = await axios.get('https://api.github.com/repos/tannerlinsley/react-query');
  return response.data;
});

我还建议使用react query dev工具。这将帮助您进一步调试问题。在您的index.js中添加这行：

import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

然后在QueryClientProvider组件中放置以下行：

<ReactQueryDevtools initialIsOpen={false} />

它看起来像这样：

<QueryClientProvider client={queryClient}>
  <App />
  <ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>

赞(0）回复(0）举报 2023-03-29

我来回答

reactjs react-query返回未定义

2条答案

修复：

提示：

相关问题

热门标签

最新问答