时间戳

首页 > 解决方案 > React 状态钩子无法正确处理异步数据

reactjs - React 状态钩子无法正确处理异步数据

问题描述

我正在尝试通过处理后端 API 的效果挂钩来设置组件的状态。由于这只是一个模拟，我想使​​用 vanilla react 方法而不是 redux-saga 之类的方法。

问题是当获取部分工作时，useState 钩子不会更新状态。

const [odds, setOdds] = useState({})

useEffect(() => {
    (async () => {
        fetchMock.once('odds', mocks.odds)
        let data = await fetch('odds').then(response => response.json())
        setOdds(data)
        console.log(odds, data) // {}, {...actual data}
    })()
}, [])

我试图在 fetch 之上通过管道传输整个过程，例如

fetch('odds')
.then(res => res.json())
.then(data => setOdds(data))
.then(() => console.log(odds)) // is still {}

但这没有任何区别。

我究竟做错了什么？

标签： reactjsreact-hooksfetch-api

解决方案

基本上，如果您调用setOdds， 的值odds不会立即改变。它仍然是钩子释放时可用的最后一个参考。

如果要在更新后访问新值，则必须使用更新odds值的源（datauseEffectuseEffectodds

useEffect(() => {

    console.log(odds);
    // Do much more

}, [odds]) // <- Tells the hook to run when the variable `odds` has changed.

推荐阅读