React组件挂载时useEffect结合localStorage调用setState不生效问题

问题原因 #

1. 空值判断逻辑不完善

当前仅判断了localStorage.getItem返回null的场景，如果localStorage内存储的personal_1本身是空字符串''，personal_1 !== null的判断会正常通过，最终把空值赋值给state，完全符合你贴出的日志表现。

2. 闭包陷阱带来的更新隐患

第一个useEffect的依赖数组为空，内部捕获的info变量永远是组件初始化时的初始状态。虽然当前写法里显式覆盖了user_1、user_2字段，理论上不受旧状态影响，但在React并发渲染模式、或者有隐式的状态更新排队时，直接基于旧状态展开的写法可能出现更新丢失。

修复方案 #

1. 补全localStorage取值的校验逻辑，排除空字符串、undefined等假值场景，同时状态更新改用函数式写法，规避闭包问题：

useEffect(() => {
    var personal_1 = window.localStorage.getItem('personal_1');
    var personal_2 = window.localStorage.getItem('personal_2');
    console.log(personal_1);
    // 替换原有if判断，只有两个值都是非空真值时才更新
    if (personal_1 && personal_2) {
        console.log('Make it easy')
        // 函数式更新直接拿到最新的前序状态
        setState(prev => ({
            ...prev,
            user_1: personal_1,
            user_2: personal_2
        }))
    }
}, [])

2. 额外确认localStorage存储和取值的key完全一致，严格区分大小写，避免拼写错误导致取到空值。
3. 如果是React18开发环境，可以临时关闭严格模式验证，排除双重挂载导致的异常更新。

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