Question

我想在用户登录时设置一些令牌值，为此我通过 useState 钩子创建了一个状态。但是当我调用 setter 函数时，该值没有更新。应用程序

const [userToken, setUserToken] = useState(false)

    const authContext = useMemo(() => ({
        signIn: () => {
            setUserToken(true)
            console.log('sign in called')
            console.log('userToken: ',userToken)
            setIsLoading(false)
         },
        signOut: () => {
            setUserToken(false)
            console.log('sign out called')
            console.log('userToken: ',userToken)

            setIsLoading(false)
        },
        signUp: () => {
            setUserToken(true)
            console.log('sign up called')
            setIsLoading(false)
        },
    }))

登录.js

const { signIn } = useContext(AuthContext)

const handleSubmit = () => {
    if (isValidEmail && isValidPassword) {
        signIn()
    } 
}

<TouchableOpacity style={styles.signInCont} onPress={handleSubmit}>
    <Text style={styles.signInTxt}>Sign In</Text>
</TouchableOpacity>

每次 userToken 为 'false'。

Answer 1

我喜欢考虑 useState 修饰符函数的方式是它是异步的；即，更新不是立即的。

这就是为什么您可能想要查看 useEffect 钩子来处理状态更改的副作用；例如：

    const [userToken, setUserToken] = useState(false)

    const authContext = useMemo(() => ({
        signIn: () => {
            setUserToken(true)
            console.log('sign in called')
            setIsLoading(false)
         },
        signOut: () => {
            setUserToken(false)
            console.log('sign out called')

            setIsLoading(false)
        },
        signUp: () => {
            setUserToken(true)
            console.log('sign up called')
            setIsLoading(false)
        },
    }))

    useEffect(() => console.log('userToken: ', userToken), [userToken])

以上（如果我输入正确）现在将打印状态更新，作为状态更改的副作用；因此，例如，如果您正在设置 userToken，那么获取某些数据（例如用户配置文件）的时间将受到状态更改的副作用。

请参阅：https://reactjs.org/docs/hooks-effect.html

useState 不更新状态

1 个答案: