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

Posted 2023-03-10

【中文标题】如何使用 React.js 进行突变？

【英文标题】：How can I do to do mutations using React.js?

【发布时间】：2021-05-21 05:50:55

【问题描述】：

我正在尝试使用 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;

你能帮帮我吗？

非常感谢！

【问题讨论】：

我认为useMutation 应该在onSubmit 函数之外，而在里面你会像addchannel() 一样调用它

不要在循环、条件或嵌套函数中调用 Hooks。相反，请始终在 React 函数的顶层使用 Hooks。请阅读Rules of Hooks

谢谢，但我怎么称呼它：useMutation(GET_ACTIVITY)？变量GET_ACTIVITY 在onSubmit 函数内

【参考方案1】：

const [addchannel, datas ] = useMutation(GET_ACTIVITY); 这一行实际上并没有调用突变。它只是为您提供了执行此操作的方法。然后，您必须在代码中的其他地方调用 addChannel。这就是为什么对 useMutation 的调用必须在 onSubmit 函数之外的原因。然后在 onSubmit 函数中调用addChannel()。然后组件将重新渲染，您可以使用datas。

编辑：在我看来，尽管您可以将用户名变量直接传递给模板文字。您将永远不必这样做！即使这样，你也必须像这样传递它：

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_ACTIVITY，更不用说调用 useMutation。

【讨论】：

谢谢，但我怎么称呼它：useMutation(GET_ACTIVITY)？变量GET_ACTIVITY 在onSubmit 函数内

GET_ACTIVITY 必须在 onSubmit 中吗？

静态变量必须在你的组件之外。您甚至可以将其放入存储查询的专用文件中。

我想我明白你遇到的问题是什么。我编辑了我的答案。看看有没有帮助。

【参考方案2】：

不要在循环、条件或嵌套函数中调用 Hooks。

你可以试试这个。

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