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

Question

我正在尝试通过处理后端 API 的效果钩子设置组件的状态。由于这只是一个模拟，我想使用香草反应方法，而不是像 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('odds')
.then(res => res.json())
.then(data => setOdds(data))
.then(() => console.log(odds)) // is still {}

但这并没有一点区别。

我做错了什么？

Answer 1

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

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

useEffect(() => {
console.log(odds);
// Do much more
}, [odds]) // <- Tells the hook to run when the variable `odds` has changed.

Answer 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
})
})()
}, [])