小编Pau*_*ano的帖子

我试图使用 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 …

几天前我开始学习 RTK Query，我一直喜欢它很酷的功能和简单性，所以我决定在我使用 Next.js 构建的项目中从 useContext 切换到 RTK Query 以及使用 Node.js 和 Express 的自定义服务器。在这个项目中，我制作了一个用于登录和注册的 api 路由，在提供的自定义 axios 基本查询 RTK 查询的帮助下，可以使用 RTK 查询和 Axios 来实现该路由。登录和注册 api 端点已经有一个在 cookie 存储中存储令牌的逻辑。我将 RTK 查询与 axios 一起使用来发布用户请求，以便他们可以获得 cookie 存储中的令牌存储的响应。这种将用户令牌存储在 cookie 中的逻辑与 useContext 和 axios 配合得很好。但使用 RTK 查询时逻辑并未按预期工作，结果如下：

• 令牌已设置在 cookie 存储中，但我得到的响应状态为 401。
• 当用户在登录或注册页面中提交凭据时，他们应该被重定向到个人资料页面，并显示其详细信息，因为我使用 useQuery 来获取用户个人资料。但数据没有显示。这意味着存储的令牌无效。
• 即使令牌已存储在 cookie 中，我也无法获取用户信息。
• 每当我单击链接将我重定向到特定路线时，useQuery 都不会获取任何内容，当我返回个人资料时，将获取并显示用户详细信息，但当我再次刷新页面时，不会显示任何数据
• 每当第一次获取请求成功时，每当刷新页面时我总是会丢失数据。
• 所有这些问题仅发生在后端受中间件保护的路由上，并且中间件用于验证令牌。但我对重新加载后端数据不受保护的页面没有任何问题。
• 我的后端还有一个中间件，用于验证和检查 cookie 中的 token 是否为 true，以检查用户是否经过身份验证，如果为 false，则应将用户定向到前端的登录页面。获取和检查数据是否为 ​​true 的逻辑位于用受保护的路由包装的 HOC 组件内部，但每当数据值为 false 时，我仍然可以转到前端中的任何路由，而不是将我重定向到登录页面。当我将数据记录到控制台时，我收到了正确的数据。
• 从 cookie 中删除令牌成功。

    export const fetcherApi = createApi({
      reducerPath: "fetcherApi",
      baseQuery: …