函数组件挂载时localStorage存储的待办数据无法加载的原因排查

问题描述 #

我希望在函数组件卸载时，将Redux Store中的待办事项数组保存到localStorage；当组件挂载（例如App刷新）时，从localStorage读取该数据。但刷新应用后，之前的数据无法加载。

我的部分代码 #

App组件：

function App() {
    const storeContents = useSelector(state => state.todo);
    const dispatch = useDispatch();

    useEffect(() => {
        const todos = localStorage.getItem("dd");
        if(todos){
            dispatch({type: "todos/loadTodos", payload: JSON.parse(todos)})
        }
        return () => {
            localStorage.setItem("dd", JSON.stringify(storeContents));
        }
        // eslint-disable-next-line
    },[])
    // ...其他代码
}

slice代码：

const todoSlice = createSlice({
    name: "todos",
    initialState: [],
    reducers: {
        loadTodos(state, action){
            return action.payload;
        },
        // ...其他reducer
    },
});

问题原因 #

1. useEffect依赖缺失：原useEffect的依赖数组为空，storeContents仅在组件首次渲染时获取初始空数组，卸载时保存的始终是这个空数组，而非最新的待办数据。
2. 卸载时机不可靠：页面刷新时，组件的卸载清理函数大概率不会执行，导致localStorage没有被更新。

解决方案 #

方案1：初始化Store时直接读取localStorage #

在slice的初始状态中直接从localStorage加载数据，确保Store启动时就有历史数据。

修改后的slice代码：

// 从localStorage加载初始数据
const getInitialTodos = () => {
  try {
    const savedTodos = localStorage.getItem("dd");
    return savedTodos ? JSON.parse(savedTodos) : [];
  } catch (err) {
    console.error("加载本地存储数据失败", err);
    return [];
  }
};

const todoSlice = createSlice({
  name: "todos",
  initialState: getInitialTodos(),
  reducers: {
    loadTodos(state, action){
      return action.payload;
    },
    // ...你的其他reducer逻辑
  },
});

方案2：实时同步Redux数据到localStorage #

监听Redux中待办数据的变化，每当数据更新就同步保存到localStorage，避免依赖组件卸载时机。

修改后的App组件代码：

function App() {
    const storeContents = useSelector(state => state.todo);
    const dispatch = useDispatch();

    // 挂载时加载数据（可选，若已在slice初始化则可省略）
    // useEffect(() => {
    //   const todos = localStorage.getItem("dd");
    //   if(todos){
    //     dispatch({type: "todos/loadTodos", payload: JSON.parse(todos)})
    //   }
    // },[])

    // 实时保存数据到localStorage
    useEffect(() => {
      localStorage.setItem("dd", JSON.stringify(storeContents));
    }, [storeContents]);

    // ...其他代码
}

最终效果 #

结合两种方案后，刷新页面时Store会直接从localStorage读取初始数据，同时待办事项的任何变更都会实时保存到localStorage，确保数据不会丢失。

内容的提问来源于stack exchange，提问作者Arman Ebrahimi