我有一些Reaction组件,它们使用本地存储来存储一些信息. 这些变量通过自定义挂钩绑定到状态变量:

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

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

    return [value, setValue];
}

该组件的用法如下:

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

现在,我想要的是,在组件卸载时将其清除.

我曾try 使用useEffect清除此问题:

useEffect(() => {
    return () => {
        setThing(prevThing => '');
    }
},[]);

然而,这似乎并不奏效.我甚至可以在清理过程中通过控制台登录 函数并看到这一点,但状态更改和随后清除 本地存储不会发生.我不确定如何才能让这件事得到妥善的澄清.

帖子主题:Re:Колибри

const getStorageValue = (key, defaultValue) => {
    let value;
    try {
        const saved = localStorage.getItem(key);
        value = JSON.parse(saved);

    } catch(err) {
        value = false;
    }

    return value || defaultValue;
}

推荐答案

如果我理解正确的话,您试图将该值设置为"",期望运行useEffect回调作为响应,并将localStorage项设置为"".但是,设置该值是不可行的,因为组件已经在卸载.发生这种情况时,您应该会在控制台中看到一条警告.

幸运的是,您仍然可以从清理回调访问localStorage,因为这不依赖于组件.

useEffect(() => {
    return () => {
        localStorage.setItem(key, '');
    }
}, [key]);

key更改或组件卸载时,此挂钩调用会将项设置为"".


另外,Storage.setItem(key, '')不会取消设置密钥,而是将空字符串设置为其值.要取消设置关键点,请使用Storage.removeItem(key).

Reactjs相关问答推荐

全局上下文挂钩-替代不起作用

为什么Next.js 14无法解析页面路由路径?

包装组件可以避免子组件重新渲染.?

ReactJs;Reaction-Hook-Form:仅当 Select 了特定 Select 列表选项时才显示文本输入

生成Reaction Vite应用程序的停靠容器时无法识别环境变量

Reaction-Query&-使用Mutation触发成功,而应该触发错误

在Reaction中导入';图片&文件夹时出错

当 URL 与我声明的任何路由都不匹配时,如何使用不会重定向到错误页面的动态 URL? - react 路由 dom

在一个事件处理程序中进行多次调度是个好主意吗?

i18next中复数键的理解

这个简单的React组件为什么会多次渲染?

在 React-Select 中显示多值的倒序

使用 map 循环浏览列表列表中的列表并显示它们

如何初始化 redux 全局存储 preloadedState

将 useState 设置为组件内部的值

如何在 React map 函数循环中使用
标签

如何使用 React Hook Form 将寄存器作为 props 发送到子组件来收集数据?

React JS:如何判断用户使用的是浏览器 url 还是桌面 electron

如何用实际的br标签替换axios响应中的br标签?

服务器端分页未按预期工作