如何使用useMutation或useQuery作为React或React Native的钩子?

Question

这是我得到的例外。这对我来说没有意义...

无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一而发生的： 1. 你可能有不匹配的 React 和渲染器版本(比如 React DOM( 2.你可能违反了钩子的规则 3. 您可能在同一应用程序中有多个 React 副本 有关如何调试和解决此问题的提示，请参阅 fb.me/react-invalid-hook-call。

这是我的组件...我正在尝试仅存档标准登录名/密码屏幕...

import React from 'react'
import { View, Text, TouchableWithoutFeedback, TextInput } from 'react- 
native'
import style from './style'
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
import { faUser, faUnlockAlt } from '@fortawesome/free-solid-svg-icons'
import { Query, useMutation } from 'react-apollo'
import { testQuery, LOGIN_MUTATION } from '../../gql/session'
class LoginForm extends React.Component {
constructor(props) {
super(props)
this.state = {
inProgress: false,
email: '[e-mail]',
password: '1234'
}
}
doLogin() {
const [_doLogin ] = useMutation(LOGIN_MUTATION, {
update: (proxy, mutationResult) => {
console.log(mutationResult)
}
,
variables: {
$email: this.setState.email,
$password: this.state.password
}
})
_doLogin()
}
render() {
return (
<View style={style.form}>
<Text style={style.formLabel}>E-Mail</Text>
<View style={style.formRow}>
<FontAwesomeIcon size={28} style={style.formIcon} icon={faUser} />
<TextInput
onChangeText={(email) => this.setState({ email })}
value={this.state.email}
keyboardType={'email-address'}
style={style.textInput} />
</View>
<Text style={style.formLabel}>Password</Text>
<View style={style.formRow}>
<FontAwesomeIcon size={28} style={style.formIcon} icon={faUnlockAlt} />
<TextInput
onChangeText={(password) => this.setState({ password })}
value={this.state.password}
secureTextEntry={true}
style={style.textInput} />
</View>
<TouchableWithoutFeedback onPress={() => { this.doLogin() }}>
<View style={[style.button, style.doLoginButton]}>
<Text style={style.buttonText}>Login</Text>
</View>
</TouchableWithoutFeedback>
<View style={style.bellowButton}>
<TouchableWithoutFeedback onPress={() => this.props.onCancel()}>
<Text style={style.cancel}>Cancel</Text>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={() => this.props.onForgot()}>
<Text style={style.forgot}>Forgot ?</Text>
</TouchableWithoutFeedback>
</View>
</View>
)
}
}

export default LoginForm

那么，出了什么问题？以及如何存档它？

Answer 1

您遇到的错误是因为您尝试在类组件中使用钩子，因此在文档中他们提到了以下内容：

你不能在类组件中使用 Hooks，但你可以 绝对将类和函数组件与 Hook 混合在一个 树。组件是类还是使用 Hooks 的函数是 该组件的实现详细信息。 从长远来看，我们 期望 Hooks 成为人们编写 React 组件的主要方式。

Answer 2

从该错误给您的 fb.me/react-invalid-hook-call 链接中：

钩子只能在函数组件的主体内部调用。

你有一个类组件，你需要将其转换为功能组件才能使用 react 钩子。

或者，如果您习惯于对组件进行类，请使用'@apollo/react-components'中的Mutation组件。

在此链接上查看更多信息：https://www.apollographql.com/docs/react/api/react-components/

Answer 3

我想指出的是，您目前正在使用class component但钩子旨在与functional component一起使用。因此，一旦您将组件更改为功能组件，您就可以按照官方文档中的示例进行操作，如下所示，然后针对您的用例进行尝试。

import gql from 'graphql-tag';
import { useMutation } from '@apollo/react-hooks';
const ADD_TODO = gql`
mutation AddTodo($type: String!) {
addTodo(type: $type) {
id
type
}
}
`;
function AddTodo() {
let input;
const [addTodo] = useMutation(ADD_TODO);
return (
<div>
<form
onSubmit={e => {
e.preventDefault();
addTodo({ variables: { type: input.value } });
input.value = '';
}}
>
<input
ref={node => {
input = node;
}}
/>
<button type="submit">Add Todo</button>
</form>
</div>
);
}
export default AddTodo();

来源： https://www.apollographql.com/docs/react/essentials/mutations/

Answer 4

添加评论，以便人们可以找到解决方案。

主要区别在于数据流，useQuery用于查询异步数据，useMutation用于CRUD操作。

示例：https://thesyntaxdiaries.com/what-is-react-query-how-to-use-usemutation-usequery-prefetch-devtools/

Answer 5

试试这个 don froget instll 包 @apollo/react-hooks

import React from 'react'
import {View, Text, TouchableWithoutFeedback, TextInput} from 'react-
native '
import {useMutation} from '@apollo/react-hooks';
import style from './style'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {faUser, faUnlockAlt} from '@fortawesome/free-solid-svg-icons'
import {testQuery, LOGIN_MUTATION} from '../../gql/session'
class LoginForm extends React.Component {
constructor(props) {
super(props)
this.state = {
inProgress: false,
email: '[e-mail]',
password: '1234'
}
}
render() {
const [addTodo] = useMutation(ADD_TODO);
return (
<View style={style.form}>
<Text style={style.formLabel}>E-Mail</Text>
<View style={style.formRow}>
<FontAwesomeIcon size={28} style={style.formIcon} icon={faUser}/>
<TextInput
onChangeText={(email) => this.setState({email})}
value={this.state.email}
keyboardType={'email-address'}
style={style.textInput}/>
</View>
<Text style={style.formLabel}>Password</Text>
<View style={style.formRow}>
<FontAwesomeIcon size={28} style={style.formIcon} icon={faUnlockAlt}/>
<TextInput
onChangeText={(password) => this.setState({password})}
value={this.state.password}
secureTextEntry={true}
style={style.textInput}/>
</View>
<TouchableWithoutFeedback
onPress={() => {
ADD_TODO({
variables: {
email: this.setState.email,
password: this.state.password
},
update: (proxy, mutationResult) => {
console.log(mutationResult)
}})}}>

<View
style={[style.button, style.doLoginButton]}>
<Text style={style.buttonText}>Login</Text>
</View>
</TouchableWithoutFeedback>
<View style={style.bellowButton}>
<TouchableWithoutFeedback onPress={() => this.props.onCancel()}>
<Text style={style.cancel}>Cancel</Text>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={() => this.props.onForgot()}>
<Text style={style.forgot}>Forgot ?</Text>
</TouchableWithoutFeedback>
</View>
</View>
) } }