时间戳

首页 > 解决方案 > 试图在我的反应应用程序中使用 cookie，但它一直被重新渲染

reactjs - 试图在我的反应应用程序中使用 cookie，但它一直被重新渲染

问题描述

我有一个带有登录/注销功能的反应应用程序。我希望应用程序在重新加载后保持登录状态，为此我正在使用 cookie。问题是，在我实现了我认为应该工作的内容之后，我收到了“警告，超出了最大更新深度。当组件在 useEffect 中调用 setState 时可能会发生这种情况，但 useEffect 要么没有依赖数组，要么没有每次渲染的依赖项都会发生变化”消息。

我究竟做错了什么？

非常感谢！！

这是代码。

会话.ts

import React from "react";
import * as Cookies from "js-cookie";

export const setSessionCookie = (session: any): void => {
  Cookies.remove("session");
  Cookies.set("session", session, { expires: 14 });
};

export const getSessionCookie: any = () => {
  const sessionCookie = Cookies.get("session");

  if (sessionCookie === undefined) {
    return {};
  } else {
    return JSON.parse(sessionCookie);
  }
};

export const SessionContext = React.createContext(getSessionCookie());

主要的.tsx

import React, { useState, useEffect } from "react";
import { Switch, Route, Router } from "react-router-dom";
import Comp1 from "./components";
import Comp2 from "./components";

import { getSessionCookie, SessionContext } from "./session";
import { createBrowserHistory } from "history";

export default function Main() {
  const [session, setSession] = useState(getSessionCookie());
  useEffect(() => {
    setSession(getSessionCookie());
  }, [session]);

  const history = createBrowserHistory();

  return (
    <SessionContext.Provider value={session}>
      <Router history={history}>
      <Switch>
        <Route exact path="/" component={Comp1} />
        <Route path="/comp2" component={Comp2} />
      </Switch>
      </Router>
    </SessionContext.Provider>
  );
}

标签： reactjsreact-routersession-cookieshistory.js

解决方案

我认为问题在于您的内部useEffect正在更改会话，然后观察会话更改。您可能可以比较新的 cookie，并且只有在 cookie 发生更改时才更新会话 -

useEffect(() => {
  const cookie = getSessionCookie();
  if (cookie !== session) setSession(cookie);
}, [session]);

不确定您的 cookie 到底是什么样子 - 您可能需要进行比!==.

推荐阅读