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 的正确响应。

4

1 回答 1

1

这最终成为我使用的 React Native 版本的问题，并且从 v0.47 开始已经解决。可以在 GitHub 上的 React Native 存储库的这个问题上找到问题的详细版本。

于 2017-08-03T14:03:26.303 回答