-1

graphql と react.js を使用していくつかのミューテーションを実行しようとしていますが、問題が発生しました。実際、次のメッセージが表示されました。

ESLint: React Hook "useMutation" is called in function "onSubmit" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter.(react-hooks/rules-of-hooks)

しかし、クリックしてフォームを検証するときに突然変異を行う必要があり、そのためには「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;

私を手伝ってくれますか ？

どうもありがとうございました ！

4

2 に答える 2

0

ループ、条件、またはネストされた関数内でフックを呼び出さないでください。

これを試すことができます。

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 } });;
  }
  ...
于 2021-02-18T09:59:59.783 に答える