使用RTK-query Redux获取数据

Question

我这样设置我的Redux

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

const baseUrl = 'http://localhost:6969/api/coins';

const createRequest = (url) => ({ url });

export const coinApi = createApi({
  reducerPath: 'coinApi',
  baseQuery: fetchBaseQuery({ baseUrl }),
  endpoints: (builder) => ({
    getCoins: builder.query({
      query: () => createRequest(`/watchlist`),
    }),
  }),
});

export const { useGetCoinsQuery } = coinApi;

    import { configureStore } from '@reduxjs/toolkit';
import { coinApi } from '../../src/services/coinApi';
import { setupListeners } from '@reduxjs/toolkit/query';

export const store = configureStore({
  reducer: {
    [coinApi.reducerPath]: coinApi.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(coinApi.middleware),
});

setupListeners(store.dispatch);

在我的组件中，我通过如下方式在JSX中呈现数据

const CoinList = () => {


 const { data, isFetching } = useGetCoinsQuery();
  console.log(data);

当我console.log(数据)时，它显示了正确的数据，但是当我在JSX中映射时，它给我一个类型错误:无法读取未定义的属性(正在读取' map ')

如果数据存在，我应该给它一份打字稿吗？当console.log是正确的时候，为什么数据是未定义的？

Answer 1

阿。我刚刚想通了，然后我必须加上

if (isFetching) return 'Loading ...'

或者数据仍然是未定义的，因为它还没有被获取？不确定，但这就是解决办法。

Answer 2

初始化数据= const {data =，isFetching} = useGetCoinsQuery()

检查此https://redux-toolkit.js.org/tutorials/rtk-query