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

如何解决Formik与react-query onSubmit一起使用时抛出“无效的钩子调用”

我有一个React Native表单，试图将Formik与react-query一起使用。问题是在onSubmit调用的函数中使用useQuery（），我得到了钩子错误。 “警告：从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',},});

解决方法

是的...您不能在其中使用钩子

您可以做的是使用组件中的钩子并将值传递给onSubmit函数。

见下文

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;
};

export default function App() {

const { isLoading,error,data } = useQuery('fetchLuke',getPokemonList);

const authenticate = (username,password) => {

    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>
        );
    }
}

  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',},});

,

反应查询具有从属查询功能，该查询仅在满足自定义条件时运行查询。

从https://react-query.tanstack.com/guides/dependent-queries

中查看以下示例

// Get the user
 const { data: user } = useQuery(['user',email],getUserByEmail)
 
 const userId = user?.id
 
 // Then get the user's projects
 const { isIdle,data: projects } = useQuery(
   ['projects',userId],getProjectsByUser,{
     // The query will not execute until the userId exists
     enabled: !!userId,}
 )
 
 // isIdle will be `true` until `enabled` is true and the query begins to fetch.
 // It will then go to the `isLoading` stage and hopefully the `isSuccess` stage :)