React中LocalStorage未同步更新最新state值问题咨询

React函数组件中，state是对应渲染周期的常量，setState触发的更新是异步批量执行的，调用setState的当下不会立刻修改当前作用域内的state变量。
你的代码逻辑问题出在增减函数里：调用setValue更新状态后，立刻读取的value还是当前渲染闭包里的旧值，根本拿不到更新后的新值，所以写入LocalStorage的永远是上一轮的旧值。
对应你描述的场景：

• 初始渲染value=10
• 第一次点击「+1」：setValue计算出新值11排队等待重渲染，紧接着执行localStorage.setItem时拿到的value还是旧值10，写入LocalStorage的是10
• 第一次更新触发重渲染后，组件里的value变成11
• 第二次点击「+1」：setValue计算出新值12排队等待重渲染，此时写入LocalStorage拿到的value是11，所以最终LocalStorage存11，而DOM重渲染后显示12，和你遇到的现象完全一致。

另外你的初始化逻辑还有隐藏问题：如果LocalStorage里从来没存过value字段，localStorage.getItem('value')会返回null，parseInt(null)得到NaN，首次渲染会显示异常。

最符合React数据流规范的写法是用useEffect监听value的变化，只要value更新就自动同步到LocalStorage，完全不需要在增减函数里手动写存储逻辑，从根源避开闭包旧值问题，同时补上初始化的兜底值。
修复后的完整代码：

import { useState, useEffect } from 'react'

function About () {
    // 初始化加兜底值，无本地存储时默认取0
    const localStorageValue = parseInt(localStorage.getItem('value') || '0')
    const [value, setValue] = useState(localStorageValue);

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

    function remove() {
        setValue(prev => prev - 1)
    }

    function add() {
        setValue(prev => prev + 1)
    }

    return (
        <>
            <h1>About page</h1>
            <button onClick={remove}>-1</button>
            {value}
            <button onClick={add}>+1</button>
        </>
    )
}

export default About;

如果你不想用useEffect，也可以在更新状态时手动拿到计算后的新值再存储，但这种写法逻辑分散，可维护性更差：

function add() {
    setValue(prev => {
        const newValue = prev + 1
        localStorage.setItem('value', newValue)
        return newValue
    })
}
// remove函数逻辑同理

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