React新手求助：自定义useLocalStorage Hook无法正常工作

你的Hook存在几个关键问题，直接导致它无法正常工作，下面是问题分析和修正后的代码：

问题点梳理 #

• 初始判断逻辑错误：storedValue !== undefined || storedValue !== null 这个条件永远为真——不管storedValue是null还是undefined，总有一个条件会成立，导致永远不会返回初始值。
• 未解析JSON数据：存储时用了JSON.stringify序列化，但取值时直接返回字符串，没有解析回原始数据结构。
• 忽略传入的初始值：硬编码返回空字符串''，完全没用到你传入的initialValue参数。
• 缺少错误处理：没有处理解析或存储时可能出现的异常（比如存储了无效JSON），容易导致页面崩溃。

修正后的完整代码 #

import { useState, useEffect } from 'react'

export function useLocalStorage(key, initialValue) {
    const [localValue, setLocalValue] = useState(() => {
        try {
            const storedValue = localStorage.getItem(key)
            // 有存储值则解析返回，否则用传入的初始值
            return storedValue ? JSON.parse(storedValue) : initialValue
        } catch (error) {
            console.error('解析localStorage数据失败:', error)
            return initialValue
        }
    })

    useEffect(() => {
        try {
            localStorage.setItem(key, JSON.stringify(localValue))
        } catch (error) {
            console.error('存储数据到localStorage失败:', error)
        }
    }, [key, localValue])

    return [localValue, setLocalValue]
}

额外说明 #

• 加入try/catch包裹解析和存储操作，避免因无效JSON等意外情况导致页面崩溃。
• 依赖数组新增key，确保当存储键名变化时能同步更新存储内容。
• 使用时如果初始值是数组/对象，直接传入对应类型即可，比如：

  // 若feedback是数组，初始值传[]
  const [feedback, setFeedback] = useLocalStorage('tasks', [])
  

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