反应状态挂钩无法正确处理异步数据

时间:2019-09-16 07:25:23

标签: reactjs react-hooks fetch-api

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

但这并没有什么不同。

我在做什么错了?

2 个答案:

答案 0 :(得分:0)

基本上,如果您调用setOdds,则odds的值不会立即更改。它仍然是脱钩时可用的最后参考。

如果要在更新后访问odds的新值,如果要在同一值中访问该值,则必须使用更新后的值(data)的源。 useEffect钩子或创建另一个useEffect钩子,仅在odds发生更改时才会触发:

useEffect(() => {

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

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

答案 1 :(得分:0)

如果要查看此处的状态已更改,可以使用

function user_last_login( $user_login, $user ) {
    update_user_meta( $user->ID, 'last_login', time() );
}
add_action( 'wp_login', 'user_last_login', 10, 2 );