React状态更新异常：_validate获取旧foo/bar状态值问题

问题原因 #

1. useState的异步更新特性：React中调用setFoo/setBar这类状态更新函数后，状态不会立即同步更新，而是被加入批量更新队列，要等当前函数执行栈完成后才会处理更新。所以在_onChange里调用setFoo(val)后立刻执行_validate，此时foo还是更新前的旧值。

2. 闭包的捕获特性：组件每次渲染时，_validate函数会捕获当前渲染周期的foo和bar值。_onChange执行时属于上一次渲染生成的闭包环境，所以_validate里访问的foo/bar是上一次的旧值。而组件顶部的console.log(foo, bar)在每次渲染完成后执行，此时已拿到新状态，所以能打印最新结果。

3. valid状态的滞后问题：同理，_validate里调用setValid后，valid状态也不会立即更新，_onChange里紧接着的if(valid)判断拿到的同样是旧值。

解决办法 #

方案1：直接传递最新值，不依赖状态变量

把_onChange中拿到的最新val直接传给_validate，跳过对状态变量的依赖，就能拿到实时值：

const [foo, setFoo] = useState(null);
const [bar, setBar] = useState(null);
const [valid, setValid] = useState(false);

const _validate = (currentFoo, currentBar) => {
    console.log(currentFoo, currentBar); // 现在是最新值
    setValid(currentFoo?.length !== 0);
}

const _onChange = (origin, val) => {
    if(origin === 'sth') {
        setFoo(val);
        // 直接把最新的val作为currentFoo传入
        _validate(val, bar);
        // 不要用valid判断，直接用当前val的条件
        if(val?.length !== 0) {
            // do sth
        }
    } else { 
        setBar(val);
        // 直接把最新的val作为currentBar传入
        _validate(foo, val);
        if(foo?.length !== 0) {
            // do sth
        }
    }
}

console.log(foo, bar); 

方案2：用useEffect监听状态变化

利用useEffect监听foo和bar的变化，每次状态更新后自动执行验证，此时能拿到最新的状态值：

const [foo, setFoo] = useState(null);
const [bar, setBar] = useState(null);
const [valid, setValid] = useState(false);

// 监听foo和bar，变化时执行验证
useEffect(() => {
    _validate();
    // 如果需要根据valid执行后续逻辑，也可以放在这里
    if(valid) {
        // do sth
    }
}, [foo, bar, valid]);

const _validate = () => {
    console.log(foo, bar); // 最新值
    setValid(foo?.length !== 0);
}

const _onChange = (origin, val) => {
    if(origin === 'sth') {
        setFoo(val);
    } else { 
        setBar(val);
    }
}

console.log(foo, bar); 

内容的提问来源于stack exchange，提问作者four-eyes