如何在 ReactJS 的类组件中使用 GraphQL 的 useLazyQuery

Question

过去 2 天我一直在努力在 ReactJS 的类组件中使用 useLazyQuery 。在类组件中提交表单时，我无法绑定惰性查询函数。还添加了我已经尝试过但不起作用的注释行。作为参考，添加我现在在项目中使用的以下代码，如果您需要我的任何其他详细信息，请告诉我：

import React from 'react';
import Stack from 'react-bootstrap/Stack';
import Image from 'react-bootstrap/Image';
import Form from 'react-bootstrap/Form';
import FloatingLabel from 'react-bootstrap/FloatingLabel';
import Button from 'react-bootstrap/Button';
import { useLazyQuery, gql } from "@apollo/client";

const GET_ACCOUNT_QUERY = gql`
query GetAccount($accountName: String!) {
  getAccount(account_name: $accountName) {
    id
  }
}
`;

const [verifyAccount, { called, loading, data }] = useLazyQuery(GET_ACCOUNT_QUERY);

class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {account: '', formerrors: {}};
    
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        //this.verifyAccount = this.verifyAccount.bind(this);
        
    }

    handleChange(event) {
        event.preventDefault();
        this.setState({[event.target.name]: event.target.value}, () => {this.validate()});
    }

    validate() {
        let errors = {};
        let pattern = /^([a-z][a-z0-9-_]*)$/;
        if (!this.state.account) {
            errors.account = "Account Id is required";
        } else if ((this.state.account.length<1 || this.state.account.length>50) || !pattern.test(this.state.account) ){
            errors.account = "Account Id is not Valid"
        }

        this.setState({formerrors: errors});
        return (Object.keys(errors).length === 0) ? false : true;
      }
      
      handleSubmit(event) {
        event.preventDefault();
        if (!this.validate()) {
            console.log("send request to apollo-server");
            verifyAccount({ variables: { accountName: this.state.account } });
        }
    }

    componentDidMount() {
        //const [verifyAccount, { called, loading, data }] = useLazyQuery(GET_ACCOUNT_QUERY);
    }

    render(){
        return(
            <div className="content-wrapper auth">
                <Stack gap={0} className="col-lg-4 mx-auto">
                <div className="auth-form-light text-start p-5">
                    <div className="brand-logo text-center">
                        <Image src="../../images/logo.svg" />
                    </div>
                    <h5>Hello! let's get started</h5>
                    <h6 className="font-weight-light">Sign in to continue.</h6>
                    <Form noValidate className='pt-3' onSubmit={this.handleSubmit}>
                        <FloatingLabel controlId="floatingInput" label="Account Id" className="mb-3">
                            <Form.Control type="text" name="account" value={this.state.account} autoComplete="off" placeholder="Account Id" onChange={this.handleChange} 
                            required
                            isInvalid={ !!this.state.formerrors.account } />
                                {this.state.formerrors.account && (
                                <Form.Control.Feedback className='font-weight-light font-12'  type='invalid'>
                                {this.state.formerrors.account}
                                </Form.Control.Feedback>
                                )}
                        </FloatingLabel>
                        <Button variant="primary" className='btn-gradient-primary' size="lg" type="submit">VERIFY</Button>
                    </Form>
                </div>
                </Stack>
            </div>
        );
    }
}

export default Home;

非常感谢任何请求。谢谢