2017-08-01 42 views
0

我正在創建一個React Native應用程序,並使用Graphcool提供的基本電子郵件/密碼身份驗證。按「登錄」按鈕時觸發突變。在第一次按下按鈕時,then回調內的代碼從不會被執行;在第二次按下按鈕時,then回調將立即執行兩次,然後我被髮送到我的'應用程序'屏幕。突變不解決,直到再次調用

請問我的配置有問題嗎?我做錯了什麼嗎?任何幫助或指導將不勝感激!謝謝!

我試圖減少代碼到只適用於這個問題。

代碼:

export type ILoginFormProps = LoginFormComponentProps & QueryProps & LoginFormApolloProps; 

interface LoginFormComponentProps { 
    err: object, 
    saveUser(id: string, email: string, token: string); 
    loginFailed(err: object); 
} 

interface LoginFormApolloProps { 
    client: ApolloClient, 
    signInUser(email: string, password: string): Promise<any>; 
} 

export interface ILoginFormState { 
    email: string, 
    password: string, 
    isRegister: boolean; 
    loading: boolean; 
} 

class LoginForm extends Component<ILoginFormProps, ILoginFormState> { 
    constructor(props) { 
     super(props); 
     this.state = { 
      email: '', 
      password: '', 
      isRegister: false, 
      loading: false 
     } 
    } 

    onLoginSuccess({ data }): void { 
     console.log(data); 
     const { token } = data.signinUser; 
     AsyncStorage.setItem('token', token).then(() => client.resetStore()); 
     Actions.app(); 
    } 

    onLogin() { 
     this.setState({ loading: true }); 
     this.props.signInUser(
      this.state.email, 
      this.state.password 
     ).then(({ data }) => { 
      console.log(data); 
      const { token } = data.signinUser; 
      AsyncStorage.setItem('token', token).then(() => client.resetStore()); 
      Actions.app(); 
     }) 
     .catch((err) => { 
      this.props.loginFailed(err); 
     }); 
    } 

    render() { 
     return (
      <Container style={{ backgroundColor: 'rgba(239,204,143,0.5)' }}> 
       <Content style={{ opacity: 1 }}> 
        <Form style={{ marginBottom: 25 }}> 
         <Item> 
          <Input 
           placeholder='Email' 
           value={this.state.email} 
           onChangeText={(text: string) => { 
            this.setState({ email: text }); 
           }} 
          /> 
         </Item> 
         <Item last> 
          <Input 
           placeholder='Password' 
           value={this.state.password} 
           onChangeText={(text: string) => { 
            this.setState({ password: text }); 
           }} 
           secureTextEntry 
          /> 
         </Item> 
        </Form> 
        <Button 
         onPress={this.onLogin.bind(this)} 
         style={{ marginLeft: 10, marginRight: 10 }} 
         block 
        > 
         <Text>Log In</Text> 
        </Button> 
       </Content> 
      </Container > 
     ); 
    } 
} 

const SignInUserMutation = gql` 
    mutation signInUser($email: String!, $password: String!) { 
    signinUser(
     email: { 
     email: $email, 
     password: $password 
     } 
    ){ 
     token, 
    } 
    }` 

const withSignIn = withApollo(graphql<LoginFormApolloProps, LoginFormComponentProps, ILoginFormProps>(
    SignInUserMutation, { 
     props: ({ mutate }) => ({ 
      signInUser: (email, password) => mutate({ variables: { email, password } }) 
     }) 
    })(withUserCreated)); 

const mapStateToProps = ({ auth }) => { 
    const { err } = auth; 
    return { err }; 
} 

export default connect(mapStateToProps, { 
    saveUser, 
    loginFailed, 
})(withSignIn); 

使用此代碼。如果我按下「登錄」,則什麼都不會發生,並且沒有任何內容顯示在調試器控制檯中。當我第二次按'登錄'時,我得到兩個console.log打印出Apollo的正確迴應。

+0

這最終是我使用的react-native版本的錯誤。它已在v0.47中修復 –

+0

尼斯,[你能回答你自己的問題](https://stackoverflow.com/help/self-answer)並將其標記爲已解決? :) – marktani

回答

1

這最終成爲我使用的React Native版本的一個問題,自v0.47起已解決。可以在GitHub上的React Native存儲庫的this issue上找到該問題的詳細版本。