React组件卸载时localStorage未清除的问题求助

你遇到的核心问题是：组件卸载阶段调用setThing('')后，由于组件即将被销毁，useLocalStorage中监听[key, value]的useEffect不会再触发，因此localStorage.setItem不会执行，导致localStorage里的项无法被清除。

下面提供两种可靠的解决方案：

方案一：直接在组件清理函数中删除localStorage项 #

既然组件卸载时状态更新无法触发后续的localStorage同步，那我们可以直接在清理函数里调用localStorage.removeItem来删除目标项，同时可以选择更新状态（虽然组件卸载后状态不会再渲染，但能保证状态和存储一致）：

useEffect(() => {
  return () => {
    localStorage.removeItem('thing');
    setThing(''); // 可选：同步状态到初始值
  };
}, []);

方案二：扩展useLocalStorage Hook，封装清除逻辑 #

如果希望将清除逻辑和Hook封装在一起，避免重复代码，可以给useLocalStorage添加一个清除方法，让组件直接调用：

修改后的useLocalStorage Hook #

export const useLocalStorage = (key, defaultValue) => {
    const [value, setValue] = useState(() => {
        return getStorageValue(key, defaultValue);
    });

    useEffect(() => {
        localStorage.setItem(key, JSON.stringify(value));
    }, [key, value]);

    // 添加清除方法
    const clearStorage = () => {
        setValue(defaultValue);
        localStorage.removeItem(key);
    };

    return [value, setValue, clearStorage];
}

组件中使用 #

const [thing, setThing, clearThingStorage] = useLocalStorage('thing', '');

useEffect(() => {
    return () => {
        clearThingStorage();
    };
}, []);

额外优化：修复getStorageValue的布尔值处理问题 #

你的getStorageValue存在一个小问题：如果存储的是布尔值false，value || defaultValue会返回defaultValue，而不是预期的false。可以修改为：

const getStorageValue = (key, defaultValue) => {
    try {
        const saved = localStorage.getItem(key);
        // 只有当saved为null（不存在该项）时才返回defaultValue
        if (saved === null) {
            return defaultValue;
        }
        return JSON.parse(saved);
    } catch(err) {
        console.error('读取localStorage失败:', err);
        return defaultValue;
    }
}

这样就能正确处理存储false、0等“假值”的情况。

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