React Native使用useState存储accessToken后获取值为null的问题

你遇到的问题核心是React的useState更新是异步的——调用setAccessToken后，state不会立刻更新，所以你紧接着打印accessToken时，拿到的还是初始的null（旧值）。

为什么会这样？ #

React为了性能优化，会把state更新操作放进队列，等当前代码执行完、合适的时机再批量更新state并重新渲染组件。所以在setAccessToken的下一行，accessToken的值还没来得及改变。

两种解决办法： #

1. 直接用已拿到的credentials.accessToken打印

既然你已经在then回调里拿到了credentials.accessToken，没必要非要用刚设置的state来打印，直接用这个值就行：

const [accessToken, setAccessToken] = useState(null)

const onLogin = () => {
    auth0.webAuth
        .authorize({
            scope: 'openid profile email'
        })
        .then(credentials => {
            setAccessToken(credentials.accessToken)
            // 直接用credentials里的token打印
            Alert.alert('Access token: ', credentials.accessToken)
            console.log('Access token: ', credentials.accessToken)
        })
        .catch(error => console.log(error))
}

2. 用useEffect监听state变化（查看更新后的state）

如果你确实需要查看更新后的accessToken state，可以用useEffect钩子监听它的变化，当state更新时再执行打印操作：

import { useState, useEffect, Alert } from 'react'

const [accessToken, setAccessToken] = useState(null)

// 监听accessToken的变化，值更新时触发
useEffect(() => {
    if (accessToken !== null) {
        Alert.alert('Access token: ', accessToken)
        console.log('Updated access token: ', accessToken)
    }
}, [accessToken]) // 依赖数组：只有accessToken变化时才执行这个effect

const onLogin = () => {
    auth0.webAuth
        .authorize({
            scope: 'openid profile email'
        })
        .then(credentials => {
            setAccessToken(credentials.accessToken)
        })
        .catch(error => console.log(error))
}

这样当accessToken成功更新后，useEffect就会触发，此时你拿到的就是最新的state值了。

内容的提问来源于stack exchange，提问作者joshk132