React+TypeScript中LocalStorage首次点击不更新问题排查

问题根源分析 #

• 状态更新异步导致LocalStorage存储滞后：React的setCounter是异步操作，调用后counter不会立刻更新。你在点击函数里直接用localStorage.counter = counter，存的其实是更新前的旧值——这就是为什么刷新后数值总是少1，首次点击存的是初始0，第二次才会存第一次更新后的值。
• 初始化解析默认值错误：localStorage.getItem('counter') || '{}'，当LocalStorage里没有counter项时，解析{}会得到NaN，虽然初始state是0，但这里埋下了潜在bug。

修复后的完整代码 #

const Counter = () => {
    const [counter, setCounter] = useState<number>(0);
    const [history, setHistory] = useState<number>(0);

    useEffect(() => {
        // 用'0'作为默认值，避免解析对象得到NaN
        const previousCount: number = JSON.parse(localStorage.getItem('counter') || '0');
        setCounter(previousCount);
        setHistory(previousCount);
    }, [])

    // 监听counter变化，自动同步到LocalStorage
    useEffect(() => {
        localStorage.setItem('counter', JSON.stringify(counter));
    }, [counter])

    const increaseCount = () => {
        setCounter(prevCount => prevCount + 1);
    }
    const decreaseCount = () => {
        setCounter(prevCount => prevCount - 1);
    }
    const resetCount = () => {
        setCounter(0);
    }

    return (
        <div>
            <button onClick={decreaseCount}>-</button>
            <span>{counter}</span>
            <button onClick={increaseCount}>+</button>
            <button onClick={resetCount}>Reset</button>
        </div>
    );
}

关键修复点 #

• 通过useEffect同步状态与LocalStorage：当counter真正更新后，副作用自动触发，把最新值存入LocalStorage，彻底解决异步更新导致的旧值存储问题。
• 修正初始化解析的默认值：把'{}'改成'0'，确保LocalStorage为空时能解析出合法数字0。
• 移除点击函数里的手动存储逻辑：交给副作用统一处理，逻辑更清晰，也避免了重复代码。

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