React+Redux页面刷新时LocalStorage清空问题求助

核心问题分析 #

• LocalStorage键名不匹配：读取用的是"ADDED_EXPENSES"，但保存时用的是"ADDED_ITEMS"，导致刷新后根本读不到之前存储的数据。
• 初始化逻辑不当：组件外部读取LocalStorage并在useEffect中dispatch，若reducer未做状态判断，易引发重复更新导致循环；且组件外部的loadedExpenses仅在组件首次加载前执行一次，无法适配后续状态变化。

分步修复方案 #

1. 统一LocalStorage键名

将读取和保存的键名保持一致，比如统一使用"ADDED_EXPENSES"：

const getLocalStorage = () => {
    const oldExpenses = JSON.parse(window.localStorage.getItem("ADDED_EXPENSES"));
    return oldExpenses || [];
};

// 更新LocalStorage的逻辑
const updateLocalStorage = (items) => {
    window.localStorage.setItem(
        "ADDED_EXPENSES",
        JSON.stringify(items)
    );
};

2. 避免无限循环：优化初始化逻辑

更合理的方式是在Redux Store创建时直接注入初始状态，组件挂载时状态就已同步LocalStorage数据，无需额外dispatch：

// store.js 中创建reducer时
const initialState = {
    expenses: getLocalStorage(),
    // 其他初始状态字段
};

const expenseReducer = (state = initialState, action) => {
    switch(action.type) {
        case 'ADD_EXPENSE':
            return { ...state, expenses: [...state.expenses, action.payload] };
        case 'LOAD_EXPENSES':
            // 加判断避免重复覆盖已有状态
            if (state.expenses.length === 0) {
                return { ...state, expenses: action.payload };
            }
            return state;
        // 其他action处理逻辑
        default:
            return state;
    }
};

如果必须在组件内初始化，需加状态判断确保只在Redux状态为空时执行dispatch：

const Expense = () => {
    const dispatch = useDispatch();
    const nonFormattedItems = useSelector(expenses);

    useEffect(() => {
        // 仅当Redux无数据时，从LocalStorage加载
        if (nonFormattedItems.length === 0) {
            const loadedExpenses = getLocalStorage();
            dispatch(loadExpenses(loadedExpenses));
        }
    }, [dispatch, nonFormattedItems]);

3. 优化LocalStorage更新逻辑

直接在useEffect中监听Redux状态变化并更新LocalStorage，避免依赖组件内函数导致的不必要重渲染：

const Expense = () => {
    const nonFormattedItems = useSelector(expenses);

    useEffect(() => {
        window.localStorage.setItem(
            "ADDED_EXPENSES",
            JSON.stringify(nonFormattedItems)
        );
    }, [nonFormattedItems]);

4. 额外性能优化：日期格式化用useMemo缓存

每次渲染都重新生成formattedItems会浪费性能，用useMemo缓存计算结果：

const formattedItems = useMemo(() => {
    return nonFormattedItems.map((expense) => ({
        ...expense,
        date: new Date(expense.date)
    }));
}, [nonFormattedItems]);

最终验证 #

修复后刷新页面，Redux状态会自动从LocalStorage读取初始值，新增支出后也会实时同步保存到LocalStorage，不会再出现数据丢失或无限循环问题。

内容的提问来源于stack exchange，提问作者Sudip Poudel