Redux-Toolkit 中的 RTK 查询返回未定义的数据，当我 console.log 数据出现在控制台中时

Question

我试图使用 Next.js（React 框架）通过 RTK 查询显示从我的自定义服务器获取的数据数组。这是我第一次使用 RTK 查询。每当我console.log获取数据时，它就会出现在浏览器控制台中。但每当我尝试映射数据以在浏览器中呈现它时，它都会抛出一个错误，提示Cannot read properties of undefined (reading 'map').

undefined我认为如果初始状态是或者null即使状态发生变化，Next.js 总是会抛出错误。这个链接谈到了使用 useMemo 钩子解决问题https://redux.js.org/tutorials/essentials/part-7-rtk-query-basics 但我不太明白。请帮我显示数据。

这是BaseQuery我遵循的函数示例，它源自 redux 工具包文档https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#axios-basequery

import axios from "axios";

const axiosBaseQuery =
  ({ baseUrl } = { baseUrl: "" }) =>
  async ({ url, method, data }) => {
    try {
      const result = await axios({ url: baseUrl + url, method, data });
      return { data: result.data };
    } catch (axiosError) {
      let err = axiosError;
      return {
        error: { status: err.response?.status, data: err.response?.data },
      };
    }
  };

export default axiosBaseQuery;

我在这里发出 GET 请求

import { createApi } from "@reduxjs/toolkit/query/react";
import axiosBaseQuery from "./axiosBaseQuery";

export const getAllCarsApi = createApi({
  reducerPath: "getAllCarsApi",
  baseQuery: axiosBaseQuery({
    baseUrl: "http://localhost:5000/",
  }),
  endpoints(build) {
    return {
      getAllCars: build.query({
        query: () => ({ url: "all-cars", method: "get" }),
      }),
    };
  },
});

export const { useGetAllCarsQuery } = getAllCarsApi;

这是我的 redux 商店

import { configureStore } from "@reduxjs/toolkit";
import { getAllCarsApi } from "./getAllCarsApi";
import { setupListeners } from "@reduxjs/toolkit/dist/query";

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

export default store;

我将商店提供给_app.js文件。

import "../styles/globals.css";
import axios from "axios";
import { MyContextProvider } from "@/store/MyContext";
import { Provider } from "react-redux";
import store from "@/store/ReduxStore/index";

axios.defaults.withCredentials = true;

function MyApp({ Component, pageProps }) {
  return (
    <MyContextProvider>
      <Provider store={store}>
        <Component {...pageProps} />
      </Provider>
    </MyContextProvider>
  );
}

export default MyApp;

我在前端获取数据。

import { useGetAllCarsQuery } from "@/store/ReduxStore/getAllCarsApi";

const theTest = () => {
  const { data, isLoading, error } = useGetAllCarsQuery();

  return (
    <div>
      {data.map((theData, i) => (
        <h1 key={i}>{theData}</h1>
      ))}
      <h1>Hello</h1>
    </div>
  );
};

export default theTest;

Answer 1

这是一个时机问题。

您的组件将始终立即渲染，并且不会推迟渲染，直到有数据为止。这意味着它也会在获取数据之前呈现。因此，当数据仍在加载时，您会尝试data克服这一点。undefinedmap

你可以做一些事情，比如检查数据是否存在来处理这个问题：

const theTest = () => {
  const { data, isLoading, error } = useGetAllCarsQuery();

  return (
    <div>
      {data && data.map((theData, i) => (
        <h1 key={i}>{theData}</h1>
      ))}
      <h1>Hello</h1>
    </div>
  );
};