为什么React中更新state变量后取值总是滞后一个渲染周期？

• React的useState状态更新是异步批量执行的，调用setVal(gender)后，不会立刻修改当前渲染作用域下的val变量。同一渲染周期内的状态值是固定的，你在回调函数里打印的val永远是触发本次回调时的旧值，更新后的新值要等到组件下一次重渲染时才会获取到。
• 额外注意子组件的代码错误：子组件函数定义命名为child，但最后导出的是Sidebar，命名不一致会导致父组件导入报错，需要统一命名为Child。

方案1：直接使用回调拿到的新值 #

如果你只是需要验证拿到的select值是否正确，直接打印回调函数接收的gender参数即可，这个参数就是用户最新选中的值：

<Child value={(gender) => {
    setVal(gender);
    // 直接打印拿到的最新参数即可
    console.log(`选中的性别为：` + gender);
}}/>

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

如果你需要在val状态更新完成后执行后续逻辑，可以通过useEffect监听val的变化，状态更新后useEffect的回调会自动触发，此时拿到的val就是更新后的值：

import React, { useState, useEffect } from 'react'
import Child from './Child';

function Parent() {
    const [val, setVal] = useState('what from parent');
    // 监听val的变化，val更新后自动执行回调
    useEffect(() => {
        console.log(`val更新后的值为：` + val);
    }, [val])
    return (
        <div className='layout'>
            <Child value={(gender) => {
                setVal(gender);
            }}/>
        </div>
    )
}

export default Parent

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