如何定位并修复React Native中Login组件的bad setState错误？

问题描述 #

代码功能正常，但持续触发以下警告：

Warning: Cannot update a component (`ForwardRef(BaseNavigationContainer)`) while rendering a different component (`Login`). To locate the bad setState() call inside `Login`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
  >> in Login (created by SceneView)

问题根源在于Login组件顶层直接执行navigation.navigate和注册onAuthStateChanged监听，这些操作会在组件渲染阶段触发导航容器的状态更新，违反React的渲染规则。

错误原因 #

• 组件渲染阶段禁止执行修改其他组件状态的操作，navigation.navigate本质是更新导航容器的state，直接放在组件顶层会在渲染时触发该操作。
• 每次组件渲染都会重复注册onAuthStateChanged监听，不仅可能导致重复跳转，还会造成内存泄漏。

修复方案 #

使用React.useEffect包裹导航逻辑和监听注册，确保操作在渲染完成后执行，且只注册一次监听，同时添加清理函数移除监听：

export function Login({ navigation }) {
  let [errorMessage, setErrorMessage] = React.useState("");
  let [email, setEmail] = React.useState("");
  let [password, setPassword] = React.useState("");

  React.useEffect(() => {
    // 渲染完成后检查已登录用户，执行跳转
    if (auth.currentUser) {
      navigation.navigate("Root");
      return;
    }

    // 注册Auth状态监听，仅执行一次
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      if (user) {
        navigation.navigate("Root");
      }
    });

    // 组件卸载时移除监听，避免内存泄漏
    return unsubscribe;
  }, [navigation]); // 依赖navigation实例，确保导航上下文变化时重新执行逻辑

  let login = () => {
    if (email !== "" && password !== "") {
      signInWithEmailAndPassword(auth, email, password)
        .then((userCredential) => {
          navigation.navigate("Home", { user: userCredential.user });
        })
        .catch((error) => {
          setErrorMessage(error.message);
        });
    }
  };

  return (
    <View style={AppStyles.loginContainer}>
      <KeyboardAvoidingView
        style={AppStyles.backgroundCover}
        behavior={Platform.OS === "ios" ? "padding" : null}
        keyboardVerticalOffset={60}
      >
        <View style={AppStyles.loginScreen}>
          <Text style={AppStyles.textHeader}>Login</Text>
          <Text style={AppStyles.errorText}>{errorMessage}</Text>
          <TextInput
            style={AppStyles.input}
            placeholder="Email"
            placeholderTextColor="#fff"
            value={email}
            onChangeText={setEmail}
          />
          <TextInput
            style={AppStyles.input}
            placeholder="Password"
            placeholderTextColor="#fff"
            secureTextEntry={true}
            passwordRules={{ required: true, minLength: 6 }}
            value={password}
            onChangeText={setPassword}
          />
          <View style={AppStyles.rowContainer}>
            <Text style={AppStyles.text}>Don't have an account? </Text>
            <TextButton
              size="20px"
              text="Sign Up"
              color="#fff"
              onPress={() => navigation.navigate("Signup")}
            />
          </View>
          <View style={AppStyles.rowContainer}>
            <Text style={AppStyles.text}>Forgot your password? </Text>
            <TextButton
              size="20px"
              text="Reset"
              color="#fff"
              onPress={() => navigation.navigate("ResetPassword")}
            />
          </View>
          <TextButton
            size="20px"
            text="Login"
            backgroundColor="#83C9F4"
            paddingVertical={6}
            paddingHorizontal={12}
            onPress={login}
          />
        </View>
      </KeyboardAvoidingView>
    </View>
  );
}

关键修复点 #

• 将用户检查和监听注册移至useEffect中，确保操作在组件渲染完成后执行，规避渲染阶段修改其他组件状态的问题。
• 添加return unsubscribe逻辑，组件卸载时自动移除Auth监听，防止内存泄漏。
• 依赖数组中加入navigation，确保导航实例变化时（如导航重置场景）重新执行逻辑。

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