javascript - react Hook : Invalid hook call while using useQuery

Question

当我提交表单时，我的表单带有提交按钮，我正在调用 lookup 函数。 当代码符合graphQl时，它返回Invalid hooks错误。

版本

"react": "^17.0.2",
"react-dom": "^17.0.2",

代码:

import React, { useEffect, useState, useCallback } from "react";
import ReactDOM from "react-dom";
import { Button, Form, Input, Row, Card, Col } from "antd";
import { SearchOutlined, LoginOutlined } from "@ant-design/icons";
import { useQuery, useMutation, gql } from "@apollo/client";

const IDP_LOOKUP = gql`
  query getBusiness($name: String!) {
    business(name: $name) {
      id
      name
      domain {
        DomainType
        ... on Domains {
          DomainName
        }
      }
    }
  }
`;

const lookup = (values) => {
  let DomainName = "https://" + values.Orgname + ".com";

  const { data, loading, error } = useQuery(IDP_LOOKUP, {
    variables: {
      name: DomainName
    }
  });
};

const Login = () => {
  return (
    <div>
      <Card size="small" title="Okta Login">
        <Row type="flex">
          <Col lg={24}>
            <Form name="lookup_login" className="login-form" onFinish={lookup}>
              <Row gutter={16} align="center" justify="center" type="flex">
                <Col lg={18}>
                  <Form.Item
                    label="Org Name"
                    name="Orgname"
                    rules={[
                      {
                        required: true,
                        message: "Please enter org name!"
                      }
                    ]}
                  >
                    <Input addonBefore="https://" addonAfter=".com" />
                  </Form.Item>
                </Col>
                <Col lg={6}>
                  <Form.Item>
                    <Button
                      type="primary"
                      htmlType="submit"
                      className="login-form-button"
                    >
                      <SearchOutlined /> Lookup
                    </Button>
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </Col>
        </Row>
      </Card>
    </div>
  );
};

错误:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

Answer 1

Apollo 有一个 useLazyQuery您可以在组件呈现后调用的钩子(Hook)。这将返回一个元组，其中第一项是一个函数，然后您可以从处理程序调用该函数来实际执行查询。

我认为这样的事情应该有效:

const Login = () => {    
  const [lookupIdp, { called, loading, data }] = useLazyQuery(IDP_LOOKUP);

  const lookup = (values) => {
    let DomainName = "https://" + values.Orgname + ".com";

    lookupIdp({
      variables: {
        name: DomainName
      }
    })
  };

  return (
      <div>