React Context State сбрасывает навигацию, несмотря на то, что использует постоянство LocalStorage - почему? ⇐ Javascript

[Anonymous]

Я использую React Context (BuildProvider) для управления и сохранения состояния моего приложения, включая сложные объекты, такие как Chothrows, FileContent и другие данные формы. Государство сохраняется в Local Storage и инициализируется из него. Проблема заключается в том, что BuildProvider не теряет данные при навигации на другую страницу, но при возвращении на ту же страницу с помощью NAVBAR данные теряются, как показано ниже: < /p>
import React, { createContext, useState, useEffect, useRef, useMemo } from "react";
import { v4 as uuidv4 } from "uuid";

export const BuildContext = createContext();

const STORAGE_KEY = "buildContextState";

export const BuildProvider = ({ children }) => {
console.log(" BuildProvider created/recreated");

// Initialize state from localStorage or defaults
const [selectedBuild, setSelectedBuild] = useState(() => {
const saved = localStorage.getItem(STORAGE_KEY);
return saved ? JSON.parse(saved).selectedBuild : null;
});

const [selected_OSTL, setOSTL] = useState(() => {
const saved = localStorage.getItem(STORAGE_KEY);
return saved ? JSON.parse(saved).selected_OSTL : "oeivi/oe/oemanifest";
});

const [enableOSTL, setEnableOSTL] = useState(() => {
const saved = localStorage.getItem(STORAGE_KEY);
return saved ? JSON.parse(saved).enableOSTL : false;
});

const [childRows, setChildRows] = useState(() => {
const saved = localStorage.getItem(STORAGE_KEY);
return saved ? JSON.parse(saved).childRows : [];
});

const [comment, setComment] = useState(() => {
const saved = localStorage.getItem(STORAGE_KEY);
return saved ? JSON.parse(saved).comment : "";
});

const [OstRef, setOstlRef] = useState(() => {
const saved = localStorage.getItem(STORAGE_KEY);
return saved ? JSON.parse(saved).OstRef : "refs/heads/master";
});

const [OSTL_REFS, setOSTL_REFS] = useState(() => {
const saved = localStorage.getItem(STORAGE_KEY);
return saved ? JSON.parse(saved).OSTL_REFS : [];
});

const [fileContent, setFileContent] = useState(() => {
const saved = localStorage.getItem(STORAGE_KEY);
return saved ? JSON.parse(saved).fileContent : [];
});

const [buttonText, setButtonText] = useState(() => {
const saved = localStorage.getItem(STORAGE_KEY);
return saved ? JSON.parse(saved).buttonText : "";
});

const [buttonLoading, setButtonLoading] = useState(() => {
const saved = localStorage.getItem(STORAGE_KEY);
return saved ? JSON.parse(saved).buttonLoading : false;
});

const [reportLink, setReportLink] = useState(() => {
const saved = localStorage.getItem(STORAGE_KEY);
return saved ? JSON.parse(saved).reportLink : "";
});

const [reportFound, setReporFound] = useState(() => {
const saved = localStorage.getItem(STORAGE_KEY);
return saved ? JSON.parse(saved).reportFound : false;
});

const [emails, setEmails] = useState(() => {
const saved = localStorage.getItem(STORAGE_KEY);
return saved ? JSON.parse(saved).emails : "";
});

const [resetKey, setResetKey] = useState(() => {
const saved = localStorage.getItem(STORAGE_KEY);
return saved ? JSON.parse(saved).resetKey : 0;
});

// WebSocket ref
const stompClientRef = useRef(null);

// Log state changes for debugging
useEffect(() => {
console.log("BuildProvider state changed:", {
selectedBuild,
selected_OSTL,
enableOSTL,
childRows,
comment,
OstRef,
OSTL_REFS,
fileContent,
buttonText,
buttonLoading,
reportLink,
reportFound,
emails,
resetKey,
});
}, [
selectedBuild,
selected_OSTL,
enableOSTL,
childRows,
comment,
OstRef,
OSTL_REFS,
fileContent,
buttonText,
buttonLoading,
reportLink,
reportFound,
emails,
resetKey,
]);

// Log mount/unmount for debugging
useEffect(() => {
console.log(" BuildProvider mounted");
return () => {
console.log(" BuildProvider unmounted");
};
}, []);

// Persist state to localStorage on any change
useEffect(() => {
const stateToSave = {
selectedBuild,
selected_OSTL,
enableOSTL,
childRows,
comment,
OstRef,
OSTL_REFS,
fileContent,
buttonText,
buttonLoading,
reportLink,
reportFound,
emails,
resetKey,
};
localStorage.setItem(STORAGE_KEY, JSON.stringify(stateToSave));
}, [
selectedBuild,
selected_OSTL,
enableOSTL,
childRows,
comment,
OstRef,
OSTL_REFS,
fileContent,
buttonText,
buttonLoading,
reportLink,
reportFound,
emails,
resetKey,
]);

// Reset function
const resetAllStates = () => {
if (stompClientRef.current && stompClientRef.current.connected) {
stompClientRef.current.disconnect();
stompClientRef.current = null;
}
setSelectedBuild(null);
setOSTL("oeivi/oe/oemanifest");
setEnableOSTL(false);
setChildRows([]);
setComment("");
setOstlRef("refs/heads/master");
setOSTL_REFS([]);
setFileContent([]);
setButtonText("");
setButtonLoading(false);
setReportLink("");
setReporFound(false);
setEmails("");
setResetKey((prev) => prev + 1);
};

const contextValue = useMemo(
() => ({
selectedBuild,
setSelectedBuild,
selected_OSTL,
setOSTL,
enableOSTL,
setEnableOSTL,
childRows,
setChildRows,
comment,
setComment,
OstRef,
setOstlRef,
OSTL_REFS,
setOSTL_REFS,
fileContent,
setFileContent,
buttonText,
setButtonText,
buttonLoading,
setButtonLoading,
reportLink,
setReportLink,
reportFound,
setReporFound,
emails,
setEmails,
resetKey,
setResetKey,
stompClientRef,
resetAllStates,
}),
[
selectedBuild,
selected_OSTL,
enableOSTL,
childRows,
comment,
OstRef,
OSTL_REFS,
fileContent,
buttonText,
buttonLoading,
reportLink,
reportFound,
emails,
resetKey,
]
);

return (

{children}

);
};
< /code>
My BuildProvider завершает все приложение на корневом уровне, и я потребляю контекст в моей панельной панели и других компонентах. Постоянство. < /p>
Дополнительная информация: < /p>

• Я проверил, что BuildProvider монтируется один раз в корне. Компоненты Используйте контекстное состояние и сеттеры исключительно (без локального дубликата состояния). < /li>
  Использование для сохранения для локального уровня работает правильно при изменениях состояния. < /li>
  < /ul>
  Создано строительство. навигация. < /li>
  Проверенные React devtools для подтверждения монтажа провайдера. < /li>
  < /ul>
  Мой вопрос: < /p>
  
  Почему контекст сброшен навигацию, даже если я сохраняю его в локальном строительстве и инициализируется из него? Как я могу гарантировать, что состояние контекста правильно восстанавливается при перемещении обратно на страницу?

Подробнее здесь: https://stackoverflow.com/questions/796 ... ersistence