我有一个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',
},
});
答案 0 :(得分:0)
是的...您不能在其中使用钩子
您可以做的是使用组件中的钩子并将值传递给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',
},
});
答案 1 :(得分:0)
反应查询具有从属查询功能,该查询仅在满足自定义条件时运行查询。
从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 :)