在MERN应用程序中，LocalStorage不会在页面刷新时保持更新

import React, { useEffect, useState } from 'react';

const MyComponent = () => {
  const [data, setData] = useState(() => {
    const storedData = localStorage.getItem('myData');
    return storedData ? JSON.parse(storedData) : null;
  });

  useEffect(() => {
    // 组件挂载时读取数据
    const storedData = localStorage.getItem('myData');
    if (storedData) {
      setData(JSON.parse(storedData));
    }
  }, []);

  useEffect(() => {
    // 数据更新时保存到 LocalStorage
    localStorage.setItem('myData', JSON.stringify(data));
  }, [data]);

  return (
    <div>
      {/* 渲染数据 */}
    </div>
  );
};

export default MyComponent;

import React, { useEffect, useState } from 'react';

const MyComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('/api/data');
      const result = await response.json();
      setData(result);
      localStorage.setItem('myData', JSON.stringify(result));
    };

    fetchData();
  }, []);

  useEffect(() => {
    const storedData = localStorage.getItem('myData');
    if (storedData) {
      setData(JSON.parse(storedData));
    }
  }, []);

  return (
    <div>
      {/* 渲染数据 */}
    </div>
  );
};

export default MyComponent;

import { createStore } from 'redux';

const initialState = {
  data: JSON.parse(localStorage.getItem('myData')) || null,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'UPDATE_DATA':
      const newData = action.payload;
      localStorage.setItem('myData', JSON.stringify(newData));
      return { ...state, data: newData };
    default:
      return state;
  }
};

const store = createStore(reducer);

export default store;