由React Native中的onChangeText触发的useLazyQuery

如何解决由React Native中的onChangeText触发的useLazyQuery

我正在使用连接到GraphQL后端的Apollo Client构建一个Android React Native应用。

我已经建立了一个登录屏幕，用户可以在其中输入用户名和密码，并在单击/按下按钮时执行登录查询。

在应用程序首次启动时（或在刷新应用程序后），一切正常。 当我第一次尝试输入凭据并成功登录时，没有什么异常。 但是在一次失败的登录尝试（由于网络错误或无效的凭据）之后，每次我从任一文本输入中键入或删除一个字符时，都会执行useLazyQuery的登录查询，而无需我按下登录按钮。 仅当我关闭并重新启动应用程序后，问题才会消失。

是onChangeText的原因吗？ 我没有正确使用useLazyQuery吗？ 我在这里想念东西吗？

这是代码：

import React,{ useState,useContext,useRef } from 'react';
import { View,Text,TextInput,ToastAndroid } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { gql,useLazyQuery } from '@apollo/client';
import AsyncStorage from '@react-native-community/async-storage';
import AuthContext from '../context/AuthContext';
import Loading from '../components/Loading';

const LOGIN = gql`
  query Login (
    $username: String!
    $password: String!
  ) {
    login (
      username: $username
      password: $password
    ) {
      token
    }
  }
`;

const Login = () => {
  const [username,setUsername] = useState('');
  const [password,setPassword] = useState('');

  const { setAuthLoading } = useContext(AuthContext);

  const nextInputRef = useRef();

  const setToken = async (token) => {
    await AsyncStorage.setItem('token',token);
    setAuthLoading(true);
  };

  const [queryLogin,{ loading,error,data }] = useLazyQuery(LOGIN);
  if (loading) return <Loading />;
  if (error) ToastAndroid.show(error.message,ToastAndroid.SHORT);
  if (data && data.login && data.login.token) {
    setToken(data.login.token);
  }

  const sendLogin = () => {
    queryLogin({ variables: { username,password } })
  };

  return (
    <View>
      <TextInput
        value={username}
        onChangeText={(text) => setUsername(text)}
        placeholder="USERNAME"
        returnKeyType="next"
        onSubmitEditing={() => nextInputRef.current.focus()}
      ></TextInput>

      <TextInput
        secureTextEntry={true}
        value={password}
        onChangeText={(text) => setPassword(text)}
        placeholder="PASSWORD"
        returnKeyType="done"
        ref={nextInputRef}
        onSubmitEditing={() => sendLogin()}
      ></TextInput>

      <TouchableOpacity onPress={() => sendLogin()}>
        <Text>LOGIN</Text>
      </TouchableOpacity>
    </View>
  );
};

这是我相关的堆栈版本：

"@apollo/client": "^3.2.1","@react-native-community/async-storage": "^1.12.0","graphql": "^15.3.0","react": "16.13.1","react-native": "0.63.2","react-native-gesture-handler": "^1.8.0",