node.js - 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 hook 解决问题 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 是 undefined - 您尝试对其进行 map。

你可以做一些事情，比如检查是否有数据来处理:

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

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