iam 尝试将主数组保存到本地存储中，但该值没有存储在 React context api 中

Question

这里我尝试将主数组保存在本地存储中并检索存储以用作全局状态，但数据未存储在本地存储中

这个文件是我的上下文

import  { createContext, useReducer, ReactNode, FC, useCallback, useEffect } from "react";
import { AppReducer } from "./AppReducer";
import { Log } from "../components/LoggingPage";


export interface maintask {
    taskName:string;
    id:number;
    logs:Log[]
}
interface firstSate {
    mainlogs:[]
}

export interface InitialState {
       mainlogs:maintask [];
}

export interface addlog{
        id:number;
        log:Log;
    }
export interface updatelog{
    mainId:number;
    updatedLog:Log;
}
export interface deleteLog{
    mainLogId:number;
    logId:number
}
 interface loggings{
    id:number;
    log:Log
 }


export interface GlobalContextTypes {
        state: InitialState;
        addMainLogs: (mainTask: maintask) => void;
        deleteMainLogs:(id:number) =>void;
        addLogs:(addLog:loggings) =>void;
        updateLogs:(updatelog:updatelog) => void;
        deleteLogs:(deleteLog:deleteLog)=>void;
}

const state:InitialState = {
    mainlogs:[]
}
const storedState = localStorage.getItem('state');
const initialState: InitialState = storedState ? JSON.parse(storedState) : state
export const GlobalContext = createContext<GlobalContextTypes | null>(null);

const GlobalProvider: FC<{ children: ReactNode }> = ({ children }): JSX.Element => {
    const [state, dispatch] = useReducer(AppReducer, initialState);
  
    useEffect(() =>{
        localStorage.setItem('state',JSON.stringify(initialState))

    },[initialState])
     
     

    const addMainLogs= (newlog:maintask ) => {
        dispatch({
            type: 'ADD_MAIN_LOG',
            payload: newlog
        });

    };

    const deleteMainLogs = (id:number) =>{
        dispatch({
            type:'DELETE_MAIN_LOG',
            payload:id
        })
    }

    const addLogs = (addLog:addlog) =>{
        dispatch({
            type:'ADD_LOGS',
            payload:addLog,
        })

    }

    const updateLogs = (updatedLog:updatelog) => {
        dispatch({
            type:'UPDATE_LOGS',
            payload:updatedLog
        })
    }

    const deleteLogs = (deleteLog:deleteLog) => {
        dispatch({
            type:'DELETE_LOGS',
            payload:deleteLog
        })
         
    }

    const contextValue: GlobalContextTypes = {
        state,
        addMainLogs,
        deleteMainLogs,
        addLogs,
        updateLogs,
        deleteLogs,
    };

    return (
        <GlobalContext.Provider value={contextValue}>
            {children}
        </GlobalContext.Provider>
    );
}

export default GlobalProvider;

我已经使用useffect将状态设置为localstorage，但数据仍然没有保存在本地存储中

Answer 1

我可以看到在依赖项数组中有一个initialState变量，并且为了再次设置本地存储项“状态”，给出了initialState。变量（实际上是常量）initialState永远不会改变，因为它是通过获取项目“状态”而产生的，该“状态”最初始终为空（本地存储最初为空）。因为它永远不会改变，所以它实际上不会触发 useEffect。

正确的代码必须是：

 useEffect(() => {
    localStorage.setItem('state',JSON.stringify(state))
 },[state])

每当“状态”发生变化时，都会触发 useEffect，并且您将在本地存储中拥有实际状态。在下一次加载中 - 您也将获得正确的值。