ReactJS应用中使用Redux-Toolkit Query调用API时控制台报错

问题场景 #

在React 18、Node.js 16环境下，使用Redux-Toolkit Query调用产品API时，执行map等数组方法触发控制台类型错误，浏览器页面无内容显示。

相关代码 #

Home.js 原代码

import React from "react";
import { Error, Loader, Products } from "../components";
import { useGetAllProductsQuery } from "../redux/services/productSlice";

const Home = () => {
  const { data, error, isLoading } = useGetAllProductsQuery();

  data.map(product => {
    console.log(product);
  })

  if (isLoading) return <Loader title="Loading Products..." />;

  if (error) return <Error />;
  return <div>
      Home
    </div>;
};

export default Home;

productSlice.js

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

export const productsApi = createApi({
  reducerPath: "productsApi",
  baseQuery: fetchBaseQuery({ baseUrl: "https://dummyjson.com/" }),
  endpoints: (builder) => ({
    getAllProducts: builder.query({
      query: () => "products",
    }),
    getProduct: builder.query({
      query: (product) => `products/search?q=${product}`,
    }),
  }),
});

export const { useGetAllProductsQuery, useGetProductQuery } = productsApi;

store.js

import { configureStore } from "@reduxjs/toolkit";
import { productsApi } from "./services/productSlice";

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

app.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { Provider } from "react-redux";
import { store } from "./redux/store";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

报错信息 #

Home.js:7 Uncaught TypeError: Cannot read properties of undefined 
(reading 'map')
at Home (Home.js:7:1)
at renderWithHooks (react-dom.development.js:16305:1)
at mountIndeterminateComponent (react-dom.development.js:20074:1)
at beginWork (react-dom.development.js:21587:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
at performUnitOfWork (react-dom.development.js:26557:1)
at workLoopSync (react-dom.development.js:26466:1)

问题原因 #

1. 逻辑顺序错误：在API请求加载阶段（isLoading为true），data的值是undefined，但代码先执行了data.map，后判断加载状态，直接触发类型错误。
2. 接口返回结构不匹配：dummyjson的/products接口返回的是包含products数组的对象（格式为{ products: [...] }），而非直接返回数组，即使请求完成，直接调用data.map也会报错。

修复方案 #

调整代码逻辑顺序，并正确访问接口返回的数组，修复后的Home.js代码如下：

import React from "react";
import { Error, Loader, Products } from "../components";
import { useGetAllProductsQuery } from "../redux/services/productSlice";

const Home = () => {
  const { data, error, isLoading } = useGetAllProductsQuery();

  // 优先处理加载和错误状态，避免访问undefined的data
  if (isLoading) return <Loader title="Loading Products..." />;
  if (error) return <Error />;

  // 正确访问接口返回的products数组
  data.products.forEach(product => {
    console.log(product);
  });

  return (
    <div>
      Home
      {/* 可选：渲染产品列表示例 */}
      <div className="products-container">
        {data.products.map(product => (
          <div key={product.id} className="product-item">
            <h3>{product.title}</h3>
            <p>价格: ${product.price}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Home;

额外优化建议 #

可以在解构data时添加默认值，进一步避免意外的undefined问题：

const { data = { products: [] }, error, isLoading } = useGetAllProductsQuery();

内容的提问来源于stack exchange，提问作者Pavitar Sharma