即使未禁用按钮也无法按下按钮

Question

我从用户处获取输入并相应地运行查询，然后有条件地渲染一些项目。现在，当我想在文本字段中使用新值并使用该新值运行另一个查询时，由于我无法单击按钮，因此该查询不起作用。

目前，我正尝试从handleSubmitForm重置表单

export const AddContactTry: React.FunctionComponent = () => {
  const { values, handleChange, handleSubmit, dirty, resetForm, handleBlur, isValid}= useFormik({
    initialValues: {
      phoneNumber: '',
    },
    onSubmit: values => {
      handleSubmitForm(values);
      //resetForm();
    },
  });

  const [isSubmitted, setIsSubmitted] = useState(false);
  const [userData, setUserData] = useState<UsersLazyQueryHookResult>('');
  const navigation = useNavigation();
  const validationSchema = phoneNumberValidationSchema;

  const [
    createUserRelationMutation,
    {
      data: addingContactData,
      loading: addingContactLoading,
      error: addingContactError,
      called: isMutationCalled,
    },
  ] = useCreateUserRelationMutation({
    onCompleted: () => {
      Alert.alert('Contact Added');
    },
  });

  const showUsers = React.useCallback(
    (data: UsersLazyQueryHookResult) => {
      if (data) {
        return (
          <View style={styles.users}>
            {data.users.nodes.map(
              (item: { firstName: string; lastName: string; id: number }) => {
                const userName = item.firstName
                  .concat(' ')
                  .concat(item.lastName);
                return (
                  <View style={styles.item} key={item.id}>
                    <Thumbnail
                      style={styles.thumbnail}
                      source={{
                        uri:
                          'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/afro_woman_female_person-512.png',
                      }}></Thumbnail>
                    <Text style={styles.userName}>{userName}</Text>
                    <View style={styles.addButtonContainer}>
                      <Button
                        rounded
                        style={styles.addButton}
                        onPress={() => {
                          addContact(Number(item.id));
                          setIsSubmitted(false);
                          setUserData(null);
                        }}>
                        <Icon
                          name="plus"
                          size={moderateScale(20)}
                          color="black"
                        />
                      </Button>
                    </View>
                  </View>
                );
              },
            )}
          </View>
        );
      }
    },
    [createUserRelationMutation, userData],
  );

  const addContact = React.useCallback(
    (id: Number) => {
      console.log('Whats the Id', id);
      createUserRelationMutation({
        variables: {
          input: { relatedUserId: id, type: RelationType.Contact, userId: 30 },
        },
      });
    },
    [createUserRelationMutation],
  );

  const getContactId = React.useCallback(
    (data: UsersLazyQueryHookResult) => {
     resetForm();
      if (data) {
        if (data.users.nodes.length == 0) {
          Alert.alert('No User Found');
        } else {
          setUserData(data);
        }
      }
    },
    [addContact],
  );

  const [loadUsers] = useUsersLazyQuery({
    onCompleted: getContactId,
    onError: _onLoadUserError,
  });

  const handleSubmitForm = React.useCallback(
    (values: FormValues) => {
      //resetForm();
      setIsSubmitted(true);
      const plusSign = '+';
      const newPhoneNumber = plusSign.concat(values.phoneNumber);
      console.log('Submitted');
      loadUsers({
        variables: {
          where: { phoneNumber: newPhoneNumber },
        },
      });
      resetForm();
      //values.phoneNumber = '';
    },
    [loadUsers],
  );

return (
    <SafeAreaView>
      <View style={styles.container}>
        <View style={styles.searchTopContainer}>
          <View style={styles.searchTopTextContainer}>
          </View>
          <View>
                <View style={styles.searchFieldContainer}>
                  <View style={styles.form}>
                    {/* <FieldInput style={styles.fieldInput}
                      handleChange={handleChange}
                      handleBlur={Formik.handleBlur}
                      value={Formik.values.phoneNumber}
                      fieldType="phoneNumber"
                      icon="phone"
                      placeholderText="49152901820"
                    /> */}
                     <Input style={styles.fieldInput}
                      onChangeText={handleChange('phoneNumber') as (text: string) => void}
                      onBlur={handleBlur('phoneNumber') as (event: any) => void}
                      value={values.phoneNumber}
                      //name="phoneNumber"
                      //fieldType="phoneNumber"
                      //icon="phone"
                      placeholder="49152901820"
                    />
                    <ErrorMessage
                      name="phoneNumber"
                      render={(msg) => (
                        <Text style={styles.errorText}>{msg}</Text>
                      )}
                    />
                  </View>
                  <View style={styles.buttonContainer}>
                <Button
                  block
                  success
                  disabled={!isValid || !dirty}
                  onPress={handleSubmit}
                  style={styles.button}>
                  <Text>Speichern</Text>
                </Button>
                  </View>
                </View>
          </View>
          {isSubmitted && showUsers(userData)}
        </View>
      </View>
    </SafeAreaView>
  );
};

该按钮为空（不脏）且无效（!isValid）时，应该被禁用（灰色）。如果脏污且有效，该按钮将变为绿色。当前，在运行第一个查询并获得结果之后，如果我在输入字段中输入有效的内容，该按钮的确会从灰色变为绿色。但是，我仍然无法“点击”它。

即使进入屏幕，我仍然相信isValid属性是正确的。如何将其设置为False？我可以使用isInitialValid:false,，但是由于isInitialValid已贬值，因此我需要一种新方法。但是，即使我在此处添加isInitialValid:false，该问题仍然无法解决。

请注意，这是React Native，在这里我不能在表单上使用onSubmit。