React 状态钩子无法正确处理异步数据答案

【问题标题】：React state hook doesn't properly handle async dataReact 状态钩子无法正确处理异步数据
【发布时间】：2020-01-17 00:18:27
【问题描述】：

我正在尝试通过处理后端 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 {}

但这并没有什么区别。

我做错了什么？

【问题讨论】：

标签： reactjs react-hooks fetch-api

【解决方案1】：

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

如果您想在更新后访问 odds 的新值，如果您想访问同一 useEffect 挂钩中的值，则必须使用更新值的源 (data)或创建另一个 useEffect 钩子，仅在 odds 更改时触发：

useEffect(() => {

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

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

【讨论】：

这是正确答案！显然，如果我不将它添加到依赖数组中，它就不会得到正确更新。这曾经导致钩子无限递归地运行自身的问题，但我找到了解决方法。谢谢！

【解决方案2】：

如果你想看到这里的状态发生了变化，你可以使用

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

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

    })()
}, [])

【讨论】：