reactjs 为什么来自组件的html可以立即读取useState更新值,即使它是异步的[重复]

gblwokeq  于 2023-01-08  发布在  React
关注(0)|答案(2)|浏览(123)
    • 此问题在此处已有答案**:

The useState set method is not reflecting a change immediately(16个答案)
8小时前关门了。
这篇文章是编辑和提交审查2小时前。
useState在html代码中立即更新,但在函数中只在下一次渲染时更新?
从"react"导入{useState}
函数weird(){

const [data, setData] = useState('previous')

function submit(e) {    <---- when I fired the submit event Form once
    setData('updated')   
    console.log(data)   <---- this will log "previous" value
}
return (
    <from onSubmit={(e)=> submit(e)}>
        {data ? console.log(data) : ''}   <---- but this will log "updated" value
    </from>
)

}导出默认值怪异

vzgqcmou

vzgqcmou1#

这是因为setData是一个异步操作。
因此,在您的函数中,当console.log(data)运行时,setData尚未完成,它将打印旧值。
而JSX(HTML部分)在值更新时重新呈现,并立即显示更新后的值。

cngwdvgl

cngwdvgl2#

React setState是异步的,不会立即反映。请尝试使用useEffect挂接。https://reactjs.org/docs/hooks-effect.html

相关问题