formik - Formik 与 react-query onSubmit 一起使用抛出“无效的钩子调用”

问题描述

我有一个 React Native 表单，我正在尝试将 Formik 与 react-query 一起使用。

问题是在从我收到钩子错误useQuery()调用的函数中使用：onSubmit

警告：从 submitForm() 捕获到未处理的错误 [错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。

我相信我理解错误是什么，但我不明白如何解决这个问题。

我拼凑的例子只是为了演示这个问题：

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Button, StyleSheet, Text, TextInput, View } from 'react-native';
import { useQuery } from 'react-query';
import { Formik } from 'formik';
import axios from 'axios';

const getPokemonList = async () => {
    const { data } = await axios.get("https://pokeapi.co/api/v2/pokemon");
    return data;
};

function authenticate(username, password) {
    const { isLoading, error, data } = useQuery('fetchLuke', getPokemonList);

    if (data) {
        {
            return (
                <Text>
                    {JSON.stringify(data,  null,  2)}
                </Text>
            );
        }
    }

    if (error) {
        return (
            <Text>{error}</Text>
        );
    }

    if ( isLoading ) {
        return (
            <Text>Retrieving Luke Skywalker Information...</Text>
        );
    }
}

export default function App() {

  return (
      <View style={styles.container}>
        <Formik
            initialValues={{ email: '' }}
            onSubmit={(values, actions) => {
                authenticate(values.email);

                actions.resetForm();
            }}
        >
          {({
              handleChange,
              handleBlur,
              handleSubmit, values }) => <View>
            <TextInput
                onChangeText={handleChange('email')}
                onBlur={handleBlur('email')}
                value={values.email}
            />
            <Button onPress={handleSubmit} title="Submit" />
          </View>}
        </Formik>
      </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

标签： formikreact-query

formik - Formik 与 react-query onSubmit 一起使用抛出“无效的钩子调用”

问题描述

解决方案

推荐阅读