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

Question

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

我做错了什么？

非常感谢!!

这是代码。

session .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>
  );
}

Answer 1

我认为问题是在您的 useEffect 中您正在更改 session ，然后观察 session 更改。您可能会比较新的 cookie 并仅在 cookie 已更改时更新 session -

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

不确定您的 cookie 究竟是什么样子 - 您可能需要进行比 !== 更复杂的比较。