пытаюсь использовать куки в моем приложении реакции, но оно все время перерисовывается

Question

У меня есть приложение реакции с функцией входа / выхода. Я хочу, чтобы приложение продолжало входить в систему после перезагрузки, и для этого я использую куки. Проблема в том, что после того, как я реализовал то, что, как я думал, должно работать, я получаю «предупреждение, максимальная глубина обновления превышена. Это может произойти, когда компонент вызывает setState внутри useEffect, но 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());

main.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

  const [session, setSession] = useState(getSessionCookie());

Вы получаете session

---

  useEffect(() => { ... }, [session]);

Сеанс изменен, вызван обратный вызов эффекта.

---

    setSession(getSessionCookie());

Мы устанавливаем новый сеанс здесь ( обратите внимание, что getSessionCookie всегда возвращает новый объект). Компонент будет перерисован.

Перейти к началу страницы.

Answer 2

Я думаю, проблема в том, что внутри вашего useEffect вы меняете сеанс, а затем наблюдаете за изменениями сеанса. Вы могли бы сравнить нового повара ie и обновить сеанс только в том случае, если изменился повар ie -

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

Не знаете точно, как выглядит ваш повар ie - возможно, вам придется сделать это более сложное сравнение, чем !==.