如何修改条件渲染模板实现注册后显示Manage Account页面？

问题根源 #

你的条件渲染逻辑存在优先级冲突：当afterRegister设为true时，第一个表达式(!afterLogin && (afterRegister || (!showRegisterForm && ...)))会优先成立（此时!afterLogin为true，afterRegister为true，逻辑或直接返回true），导致后续的afterRegister && ...分支永远不会被执行，所以注册成功后仍停留在登录页面。

修改方案 #

重构条件判断顺序，优先判断是否已登录/注册成功，再处理登录/注册表单的显示逻辑，确保登录或注册成功后直接渲染管理账户页面：

return (
  // 先处理登录/注册成功后的页面渲染
  (afterLogin || afterRegister) ? (
    <View>
      <Text>Manage Account.</Text>
      <Button onPress={stripeOnboarding} title='Connect with Stripe'/>
    </View>
  ) : showRegisterForm ? (
    // 显示注册表单
    <View>
      <Text>Registration Form.</Text>
      <TextInput placeholder='First name' onChangeText={text => setFirstName(text)} style={styles.registerFormField}></TextInput>
      <TextInput placeholder='Last name' onChangeText={text => setLastName(text)} style={styles.registerFormField}></TextInput>
      <TextInput placeholder='Email address' onChangeText={text => setUserEmail(text)} style={styles.registerFormField}></TextInput>
      <TextInput placeholder='Password' onChangeText={text => setUserPassword(text)} style={styles.registerFormField} secureTextEntry></TextInput>
      <TextInput placeholder='Confirm password' onChangeText={text => setConfirmPassword(text)} style={styles.registerFormField} secureTextEntry></TextInput>
      <Button onPress={submitRegistrationForm} title='Register'/>
    </View>
  ) : (
    // 显示登录表单
    <View style={styles.container}>
      <View style={styles.inputView}>
        <TextInput
          style={styles.inputText}
          placeholder="Email"
          placeholderTextColor="#003f5c"
          onChangeText={(text) => setEmail(text)}
        />
      </View>
      <View style={styles.inputView}>
        <TextInput
          style={styles.inputText}
          secureTextEntry
          placeholder="Password"
          placeholderTextColor="#003f5c"
          onChangeText={(text) => setPassword(text)}
        />
      </View>
      <View style={styles.inputView}>
        <TouchableOpacity
          onPress={onPressLogin}
          style={styles.loginBtn}>
          <Text>Log in.</Text>
        </TouchableOpacity>
      </View>
      <View>
        <Button
          onPress={() => setShowRegisterForm(!showRegisterForm)}
          style={styles.registerBtn}
          title='Register'
        />
      </View>
    </View>
  )
);

额外优化说明 #

• 合并了登录/注册成功后的重复页面代码，减少冗余
• 用嵌套三元表达式替代复杂的逻辑与/或组合，代码结构更直观易维护

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