React导航鉴权流问题：能否循环componentWillMount获取API的user_key？

你遇到的核心问题很明确：登录状态更新后，App组件没有同步这个状态变化，导致路由无法自动切换。你的componentWillMount只在应用启动时执行一次，登录后AsyncStorage里的凭证变了，但App组件的signedIn状态没更新，自然不会重新渲染对应路由。

下面给你两种贴合现有代码的可行解决方案：

方案一：手动触发状态更新（无需改动Redux结构） #

步骤1：重构App组件的状态检查逻辑 #

把原来只在初始化时执行的登录状态检查，封装成可重复调用的方法，同时改用componentDidMount（componentWillMount已被React官方废弃）：

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      signedIn: false,
      checkedSignIn: false
    };
    // 绑定方法到组件实例
    this.refreshAuthStatus = this.refreshAuthStatus.bind(this);
  }

  // 封装登录状态检查逻辑
  async refreshAuthStatus() {
    try {
      const isAuthenticated = await isSignedIn();
      this.setState({ signedIn: isAuthenticated });
    } catch (err) {
      alert("An error occurred");
    }
  }

  async componentDidMount() {
    await this.refreshAuthStatus();
    this.setState({ checkedSignIn: true });
  }

  render() {
    const { checkedSignIn, signedIn } = this.state;

    if (!checkedSignIn) {
      return null;
    }

    const Layout = createRootNavigator(signedIn);
    return (
      <SafeAreaView style={styles.safeArea}>
        <View style={{flex: 1, backgroundColor: '#ffffff'}}>
          <StatusBar barStyle="light-content"/>
          {/* 通过screenProps把刷新方法传递给子路由 */}
          <Layout screenProps={{ onAuthChange: this.refreshAuthStatus }} />
          <AlertContainer/>
        </View>
      </SafeAreaView>
    )
  }
};

步骤2：在登录/登出后触发状态刷新 #

在你的登录页面（SignedOut路由下的登录组件），完成API请求并调用onSignIn后，触发App组件的状态更新：

// 登录按钮点击事件示例
const handleLogin = async () => {
  // 调用API获取user_id的逻辑
  const userResponse = await fetch('/api/login', {
    method: 'POST',
    body: JSON.stringify({ /* 你的用户名、密码等参数 */ })
  });
  const userId = await userResponse.json();

  if (userId) {
    // 保存登录状态到AsyncStorage
    await onSignIn();
    // 通知App组件更新登录状态
    this.props.screenProps.onAuthChange();
  }
};

登出时同理，在SignedIn路由的登出按钮点击事件里：

const handleLogout = async () => {
  await onSignOut();
  this.props.screenProps.onAuthChange();
};

方案二：用Redux管理登录状态（更推荐，适配你的现有Redux架构） #

既然你已经在使用Redux，直接把登录状态放到store里管理是更优雅的方式，状态变化会自动触发组件重新渲染。

步骤1：创建Auth相关的Redux Action和Reducer #

// authActions.js
export const SET_AUTH_STATUS = 'SET_AUTH_STATUS';
export const SET_AUTH_CHECKED = 'SET_AUTH_CHECKED';

export const setAuthStatus = (isSignedIn) => ({
  type: SET_AUTH_STATUS,
  payload: isSignedIn
});

export const setAuthChecked = () => ({
  type: SET_AUTH_CHECKED
});

// authReducer.js
const initialState = {
  isSignedIn: false,
  checkedSignIn: false
};

export default (state = initialState, action) => {
  switch (action.type) {
    case SET_AUTH_STATUS:
      return { ...state, isSignedIn: action.payload };
    case SET_AUTH_CHECKED:
      return { ...state, checkedSignIn: true };
    default:
      return state;
  }
};

记得把这个reducer添加到你的Redux rootReducer中。

步骤2：修改App组件连接Redux #

import { connect } from 'react-redux';
import { setAuthStatus, setAuthChecked } from './authActions';

class App extends Component {
  async componentDidMount() {
    try {
      const isAuthenticated = await isSignedIn();
      this.props.setAuthStatus(isAuthenticated);
    } catch (err) {
      alert("An error occurred");
    } finally {
      this.props.setAuthChecked();
    }
  }

  render() {
    const { isSignedIn, checkedSignIn } = this.props;

    if (!checkedSignIn) {
      return null;
    }

    const Layout = createRootNavigator(isSignedIn);
    return (
      <SafeAreaView style={styles.safeArea}>
        <View style={{flex: 1, backgroundColor: '#ffffff'}}>
          <StatusBar barStyle="light-content"/>
          <Layout />
          <AlertContainer/>
        </View>
      </SafeAreaView>
    )
  }
};

const mapStateToProps = (state) => ({
  isSignedIn: state.auth.isSignedIn,
  checkedSignIn: state.auth.checkedSignIn
});

const mapDispatchToProps = {
  setAuthStatus,
  setAuthChecked
};

export default connect(mapStateToProps, mapDispatchToProps)(App);

步骤3：在登录/登出组件更新Redux状态 #

在登录组件里：

import { connect } from 'react-redux';
import { setAuthStatus } from './authActions';

class LoginScreen extends Component {
  handleLogin = async () => {
    // 调用API获取user_id逻辑
    const userId = await fetchLoginCredentials();
    if (userId) {
      await onSignIn();
      // 更新Redux里的登录状态
      this.props.setAuthStatus(true);
    }
  };

  // ...其他组件代码
}

export default connect(null, { setAuthStatus })(LoginScreen);

在登出组件里：

const handleLogout = async () => {
  await onSignOut();
  this.props.setAuthStatus(false);
};

为什么原来的代码不生效？ #

你的componentWillMount只会在App组件第一次挂载时执行，登录后AsyncStorage的内容变化了，但App组件的signedIn状态没有同步更新，所以render方法还是用旧状态创建路由，自然不会切换到仪表盘页面。上面的两种方案都是通过主动更新状态触发App组件重新渲染，从而创建对应状态的路由。

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