React Native中Hook状态变化时如何实现页面跳转？

当前实现的核心问题 #

你现在在组件渲染阶段直接调用gotoVerifyTAC()，这会触发无限重渲染循环：

• 当!loading && data?.accessToken条件满足时，执行导航跳转，而导航操作会触发组件重新渲染
• 重新渲染时再次检查条件，满足后又执行导航，陷入死循环
• React要求渲染逻辑是纯函数，不能在渲染阶段执行导航这类副作用操作

修复方案：使用useEffect监听状态变化 #

通过useEffect钩子监听loading和data的状态变化，仅当状态满足跳转条件时执行导航操作：

import { useEffect } from 'react'; // 记得导入useEffect

function Signin({navigation}) {

  const [form, setForm] = useState({});
  const [errors, setErrors] = useState({});

  const {
    authDispatch,
    authState: {error, loading, data},
  } = useContext(GlobalContext);

  const onPressLogin = () => {
    signin(form)(authDispatch);
  };

  function gotoVerifyTAC() {
    navigation.navigate(VERIFY_OTP_SCREEN);
  }

  // 监听状态变化，满足条件时执行跳转
  useEffect(() => {
    if (!loading && data?.accessToken) {
      gotoVerifyTAC();
    }
  }, [loading, data, navigation]); // 依赖数组包含所有用到的外部变量

  return (
    <View>
      {loading && <LoadingModal loading={loading} size={'large'} />}
      <View>
        {/* 移除渲染阶段的跳转调用 */}
        <SigninComponent
          onChange={onChange}
          onPressLogin={onPressLogin}
          onPressResetPassword={onPressResetPassword}
          form={form}
          errors={errors}
          error={error}
          loading={loading}
          data={data}
          navigation={navigation}
        />
      </View>
    </View>
  );
}

export default Signin;

关键说明 #

• useEffect是React处理副作用的标准方式，只有当依赖数组中的loading、data或navigation发生变化时，才会执行内部逻辑，彻底避免无限循环
• 依赖数组必须包含所有在副作用中用到的外部变量，符合React的hooks规则
• 渲染阶段只负责输出UI，所有状态变更、导航这类操作都要放在副作用或事件回调中

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