Reactjs 如何使用React.js进行突变？

我正在尝试使用graphql和react.js进行一些突变，但我遇到了一个问题。事实上，我得到了以下信息：

ESLint:React钩子“usemotation”在函数“onSubmit”中调用，该函数既不是React函数组件，也不是自定义React钩子函数。React组件名称必须以大写字母开头。（React挂钩/挂钩规则）

但我需要在单击验证表单时进行变异，为此我需要函数“onSUbmit”

这是我的密码：

import React from "react";
import { Modal, Button } from "react-bootstrap";
import {useForm} from "react-hook-form";
import {gql, useMutation, useQuery} from '@apollo/client';
import {BrowserRouter, Link, Redirect} from "react-router-dom";

const Register = (props) => {
  const { register, handleSubmit, errors  } = useForm();
  const onSubmit = data => {
    let username = data.Username;
    const GET_ACTIVITY = gql`
    mutation Register($username: String!){
    register(username: $username){
    username
    } 
    }
    `
    const [addchannel, { datas} ] = useMutation(GET_ACTIVITY);
    }
  console.log(props);

    return (
      <Modal show={props.show} onHide={props.onClose} centered>
        <div className="login-form">
          <h3 className="h3 mb-3 font-weight-normal" style={{textAlign: "center"}}> Register</h3>
          <form className="form-signin" onSubmit={handleSubmit(onSubmit)} >
            <div className="form-group">
            <input
              type="text"
              id="inputUsername"
              className="form-control"
              placeholder="Username"
              required=""
              autoFocus=""
              name="Username"
              ref={register({ required: true})}
            />
            <button className="btn btn-outline-success btn-block" type="submit" >
              <i className="fas fa-sign-in-alt" /> Register
            </button>
            <hr />
            </div>
          </form>
        </div>
      </Modal>
    );
  }

export default Register;

从“React”导入React；
从“react bootstrap”导入{Modal，Button}；
从“react hook form”导入{useForm}；
从'@apollo/client'导入{gql，UseVaritation，useQuery}；
从“react router dom”导入{BrowserRouter，Link，Redirect}；
常量寄存器=（道具）=>{
常量{register，handleSubmit，errors}=useForm（）；
const onSubmit=data=>{
让username=data.username；
const GET_ACTIVITY=gql`
变异寄存器（$username:String！）{
注册（用户名：$username）{
用户名
} 
}
`
const[addchannel，{datas}]=使用变异（GET_活动）；
}
控制台日志（道具）；
返回(
登记
登记

);
}
导出默认寄存器；

你能帮我吗

---

多谢各位

这一行

const[addchannel，{datas}]=usemotation（GET_活动）实际上并不调用变异。它只是给你做这件事的方法。然后必须在代码的其他地方调用addChannel。这就是为什么对useMutation的调用必须在onSubmit函数之外。在onSubmit函数中，然后调用
addChannel（）
。然后该组件将重新加载，您可以使用
数据

编辑：在我看来，您认为可以将username变量直接传递给模板文本。你永远不必这样做！即使如此，你也必须这样通过考试：

gql`
    mutation Register($username: String!){
    register(username: ${$username}){
    username
    } 
    }
    `

但同样，您不应该像这样构建动态查询

你必须这样称呼你的突变：

addChannel({ // this is the function returned by useMutation
  variables: {
    username // that's where you pass username !
  }
})

因此，不需要在函数中有GET_活动，更不用说调用useCommutation了。
不要在循环、条件或嵌套函数中调用钩子

你可以试试这个

const Register = (props) => {
  const { register, handleSubmit, errors  } = useForm();
  const [addChannel, { datas} ] = useMutation(GET_ACTIVITY);
  const GET_ACTIVITY= gql`
    mutation Register($username: String!){
      register(username: $username){
        username
      } 
    }
    `
  const onSubmit = data => {
    addChannel({ variables: { username: data.Username } });;
  }
  ...

我认为
usemotation
应该在
onSubmit
函数的外部，在内部，您可以像
addchannel（）
那样调用它，而不要在循环、条件或嵌套函数中调用钩子。相反，总是在React函数的顶层使用钩子。请阅读“谢谢”，但我如何称呼它：
使用变异（获取活动）
？变量
GET\u ACTIVITY
位于
onSubmit
函数中谢谢，但是我如何调用它：
usemotation（GET\u ACTIVITY）
？变量
GET\u ACTIVITY
位于
onSubmit
函数中
GET\u ACTIVITY
是否必须位于onSubmit？静态变量必须位于组件外部。你甚至可以把它放在一个专门的文件中，在那里你可以存储你的查询。我想我理解你的问题是什么。我编辑了我的答案。看看这是否有帮助。