我試圖使用 NextJS（React 框架）使用 RTK Query 顯示從我的自定義服務器獲取的資料陣列。這是我第一次使用 RTK Query。每當我 console.log 資料時，它都會出現在瀏覽器控制臺中。但是每當我嘗試映射資料以在瀏覽器中呈現它時，它總是拋出一個錯誤，說“無法讀取未定義的屬性（讀取'map'）”。我認為如果初始狀態未定義或為 null，即使狀態發生變化，Nextjs 總是會拋出錯誤。這個鏈接談到了使用 useMemo 鉤子解決問題https://redux.js.org/tutorials/essentials/part-7-rtk-query-basics 但我不太了解。請幫助我顯示資料。提前非常感謝。
//Here is the BaseQuery function example I followed, it was derived from redux toolkit docmentation 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;
//I make the GET request here
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;
//This is my redux store
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;
//I provide the store to the _app.js file.
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;
//I get the data here in my frontend.
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;
uj5u.com熱心網友回復：
這是一個時間問題。
您的組件將始終立即渲染，并且在資料存在之前不會延遲渲染。這意味著它也會在您的資料被獲取之前呈現。因此，當資料仍在加載時，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>
);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/428961.html