React Native中AsyncStorage存token后无法即时更新state求助

核心问题 #

你当前的逻辑仅将令牌存入AsyncStorage，依赖应用重启时调用getItem更新状态，但认证完成返回组件后，没有主动触发状态更新，导致界面无法即时刷新。

解决方案：拿到令牌后直接同步更新状态 #

在useAuthRequest获取到成功响应的回调中，同时完成两个操作：将令牌存入AsyncStorage，直接调用状态更新函数，无需等待从本地存储读取。

代码示例 #

修改认证响应处理逻辑，添加即时状态更新：

import { useAuthRequest } from 'expo-auth-session';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useState, useEffect } from 'react';
import { View, Button, Text } from 'react-native';

const SpotifyAuth = () => {
  const [spotifyAccessToken, setSpotifyAccessToken] = useState(null);

  const discovery = {
    authorizationEndpoint: 'https://accounts.spotify.com/authorize',
    tokenEndpoint: 'https://accounts.spotify.com/api/token',
  };

  const [request, response, promptAsync] = useAuthRequest(
    {
      clientId: '你的Spotify客户端ID',
      scopes: ['user-read-private', 'user-read-email'],
      redirectUri: '你的重定向URI',
    },
    discovery
  );

  // 处理认证响应，即时更新状态
  useEffect(() => {
    if (response?.type === 'success') {
      const { access_token } = response.params;
      // 存入本地存储
      AsyncStorage.setItem('spotifyAccessToken', access_token);
      // 直接更新状态，触发界面刷新
      setSpotifyAccessToken(access_token);
    }
  }, [response]);

  // 组件挂载时加载已保存的令牌（保留原有逻辑）
  useEffect(() => {
    const loadSavedToken = async () => {
      const savedToken = await AsyncStorage.getItem('spotifyAccessToken');
      if (savedToken) {
        setSpotifyAccessToken(savedToken);
      }
    };
    loadSavedToken();
  }, []);

  return (
    <View>
      <Button onPress={() => promptAsync()} title="登录Spotify" />
      {spotifyAccessToken ? (
        <Text>访问令牌：{spotifyAccessToken}</Text>
      ) : (
        <Text>Loading...</Text>
      )}
    </View>
  );
};

export default SpotifyAuth;

逻辑说明 #

认证成功后，response对象会携带access_token，此时直接调用setSpotifyAccessToken更新状态，组件会立刻重新渲染，将"Loading..."替换为令牌内容，无需等待应用重启。

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