Question

我正在创建一个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的正确答案。

Answer 1

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

变异不会解决，直到再次调用

1 个答案: