我有一个组件在初始 onClick 之后触发 onClick 事件

Question

const component = (props) => {
  const [email, setEmail] = useState('')
  const [getUserByEmail, { data, error, loading }] = useLazyQuery(userQuery,
    {
      variables: {
        userEmail: email,
      },
    });

    const handleClick = () => {
       getUserByEmail(email)
    }

    return (
      <Grid item xs={12} className={props.classes.emailFormContainer}>
        <TextField
          className={props.classes.emailFieldContainer}
          onChange={e => setEmail(e.target.value)}
        />
        <Button
          className={props.classes.button}
          onClick={handleClick}
        >
          Join Now
        </Button>
      </Grid>
}

我遇到了一个问题，即在初始查询或按钮单击之后而不是之前，每次我开始在文本字段中键入时都会触发按钮的 onClick 事件。有谁知道为什么会这样？我正在使用 graphql 和 apollo 来查询我的组件，并使用材质 ui。