反应本地手柄登录和注册

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（）中使用异步等待。这样，只有在Inbeup（）承诺解析后才调用登录（）。

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')
    }

另一种方法是将登录（）放在Inbep（）的.then中。这将与异步等待的工作相同。登录（）在解析后将调用登录（）。然后，如果仅在登录用户后才要导航，则可以将Navigate（）放入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')
          }
        ])
      )
  }