Reactjs 如何使用UseVariation或useQuery作为React或React Native上的钩子？

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

无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一： 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: 'hello@hello.com',
        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

从“React”导入React
从“反应”导入{View，Text，TouchableWithoutFeedback，TextInput}
土生土长的
从“./style”导入样式
从“@fortawesome/react-native-fontawesome”导入{FontAwesomeIcon}
从“@fortawesome/free solid svg icons”导入{faUser，faUnlockAlt}
从'react apollo'导入{Query，UseVaritation}
从“../../gql/session”导入{testQuery，LOGIN\u MUTATION}
类LoginForm扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
进展：错误，
电邮:'hello@hello.com',
密码：“1234”
}
}
多洛金（）{
常量[\u doLogin]=使用变异（登录变异{
更新：（代理，变异结果）=>{
console.log（mutationResult）
}
,
变量：{
$email:this.setState.email，
$password:this.state.password
}
})
_多洛金（）
}
render（）{
返回(
电子邮件
this.setState（{email}）}
值={this.state.email}
键盘类型={'email-address'}
style={style.textInput}/>
密码
this.setState（{password}）}
值={this.state.password}
secureTextEntry={true}
style={style.textInput}/>
{this.doLogin（）}}>
登录
this.props.onCancel（）}>
取消
this.props.onforget（）}>
忘记？
)
}
}
导出默认登录表单

---

那么，怎么了？如何存档

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

不能在类组件内部使用挂钩，但可以 明确地将类和函数组件与挂钩混合在一个 树。组件是一个类还是一个使用钩子的函数是不确定的 该组件的实现细节。从长远来看，我们 期望钩子是人们编写组件的主要方式

---

我想指出的是，您目前使用的是

类组件

，但是钩子是为

功能组件

设计的。因此，一旦您将组件更改为功能组件，就可以按照下面所示的apollo graphql钩子的官方文档中的示例进行操作，然后针对您的用例进行尝试

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

从“graphql标签”导入gql；
从'@apollo/react-hooks'导入{UseStation}；
const ADD_TODO=gql`
突变AddTodo（$type:String！）{
addTodo（类型：$type）{
身份证件
类型
}
}
`;
函数AddTodo（）{
让输入；
常量[addTodo]=使用变异（ADD_TODO）；
返回(
{
e、 预防默认值（）；
addTodo（{变量：{type:input.value}}）；
input.value=''；
}}
>
{
输入=节点；
}}
/>
添加待办事项
);
}
导出默认AddTodo（）；

---

来源：

来自错误提供给您的fb.me/react-invalid-hook-call链接：

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

如果您有一个类组件，则需要将其转换为功能组件，以便使用react钩子

或者，如果您习惯于对组件进行分类，请使用

“@apollo/react components”

中的

Mutation

组件

---

请参阅此链接的更多信息：

试试don froget instll package@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: 'hello@hello.com',
            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>
        ) } }

从“React”导入React
从“react”导入{View，Text，TouchableWithoutFeedback，TextInput}-
土生土长的
从'@apollo/react-hooks'导入{UseStation}；
从“./style”导入样式
从“@fortawesome/react-native-fontawesome”导入{FontAwesomeIcon}
从“@fortawesome/free solid svg icons”导入{faUser，faUnlockAlt}
从“../../gql/session”导入{testQuery，LOGIN\u MUTATION}
类LoginForm扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
进展：错误，
电邮:'hello@hello.com',
密码：“1234”
}
}
render（）{
常量[addTodo]=使用变异（ADD_TODO）；
返回(
电子邮件
this.setState（{email}）}
值={this.state.email}
键盘类型={'email-address'}
style={style.textInput}/>
密码
this.setState（{password}）}
值={this.state.password}
secureTextEntry={true}
style={style.textInput}/>
{
添加待办事项({
变量：{
电子邮件：this.setState.email，
密码：this.state.password
},
更新：（代理，变异结果）=>{
console.log（mut