Question

用户单击登录按钮后，我想按以下顺序执行3个步骤 1）在服务器上注册用户 2）将用户登录到服务器 3）打开主页

this.props.login和this.props.signUp是异步函数，来自动作。有什么正确的方法可以使它们按特定顺序依次工作？我应该使用回调还是某些生命周期方法？

请举例说明如何使其工作。

谢谢！

...
import { login, signUp} from 'action';

class Auth extends Component {

    handleLogin(){
      const { name, email, password} = this.props; 
      this.props.signUp( name, email, password)
      this.props.login(email,  password)
      this.props.navigtion.navigate('Home')
    }
  render(){
    return(
      <View>
        <Button 
          title='Login'
          onPress={()=> this.handleLogin()}
        />
      </View>
    )
  }
}

Answer 1

您可以在handleLogin（）中使用异步等待。这样，仅在signUp（）承诺解决后才调用login（）。

async handleLogin(){
      const { name, email, password} = this.props; 
      await this.props.signUp( name, email, password)
      await this.props.login(email,  password)
      this.props.navigtion.navigate('Home')
    }

另一种方法是将login（）放在signUp（）的.then中。这将与异步等待相同。 signUp（）解决后，将调用login（）。如果只想在用户登录后进行导航，则可以将navigation（）放在login（）的.then中。

handleLogin(){
      const { name, email, password} = this.props; 
      this.props.signUp( name, email, password)
      .then(this.props.login(email,  password)
      .then(this.props.navigtion.navigate('Home'))
      )
    }

希望这会有所帮助。

Answer 2

这就是我的工作方式，并且一切正常，但是我不确定在最佳实践和清晰的语法方面是否还可以。

当用户单击按钮时，它将运行_handleSignup（）检查所有输入后，将逐步运行异步功能。

  async _handleSignup() {
    const { name, email, password, passwordConfirm, phone } = this.props;
    if (name.length === 0 && email.length === 0) {
      Alert.alert('Make sure all inputs is filled');
      return;
    } else if (password !== passwordConfirm) {
      Alert.alert('Password not match');
      return;
    }
      await this.props.signUp(name, email, password)
      await this.props.login(email, password).then(
        Alert.alert('Account created', [
          {
            text:'Login',
            onPress: ()=> this.props.navigation.navigate('Category')
          }
        ])
      )
  }

React-native句柄登录和注册

2 个答案: