反应 - Query返回未定义

Question

我正在使用React 18.2与Redux Toolkit和React-Query一起使用。

我将代码设置为以下内容，但是我在React-Query 中获得了 不确定的数据返回。
但是，在检查Chrome浏览器中的“网络”选项卡时，我确实会得到响应。
第一次实施反应问题。我在做什么错？

index.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();

app.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;
  

Answer 1

而不是此代码

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;

Answer 2

修复：

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

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

请注意，我已将您的函数提取到fetchdata中的查询中，但它保持不变。您可以按照自己的意愿命名您的变量。

这是与变量命名有关的范围问题。在代码中，您正在破坏使用相同的变量名称数据的Axios响应和React查询响应。这似乎使变量发生冲突。

提示：

我想建议您使用@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>