Reactjs 事件发生后如何激发反应挂钩

我对反应和如何使用钩子很陌生。我知道下面的代码不起作用，但我编写它是为了显示我想要实现的目标。基本上，我希望在输入框中发生更改后使用useQuery，这是不允许的（在钩子或事件中使用钩子）

那么，如何使用react钩子正确地实现这个用例呢？我想在用户输入时从GraphQL加载数据

import React, { useState, useQuery } from "react";
import { myGraphQLQuery } from "../../api/query/myGraphQLQuery";

// functional component
const HooksForm = props => {
  // create state property 'name' and initialize it
  const [name, setName] = useState("Peanut");
  const handleNameChange = e => {
    const [loading, error, data] = useQuery(myGraphQLQuery)
  };

  return (
    <div>
      <form>
        <label>
          Name:
          <input
            type="text"
            name="name"
            value={name}
            onChange={handleNameChange}
          />
        </label>
      </form>
    </div>
  );
};

export default HooksForm;

import React，{useState，useQuery}来自“React”；
从“../../api/query/myGraphQLQuery”导入{myGraphQLQuery}”；
//功能部件
const HooksForm=props=>{
//创建状态属性“name”并初始化它
const[name，setName]=useState（“花生”）；
常量handleNameChange=e=>{
const[loading，error，data]=useQuery（myGraphQLQuery）
};
返回(
姓名：
);
};
导出默认钩子窗体；

我认为只要名称更改，就可以调用

useffect

钩子中的函数。您可以对其进行去抖动处理，这样就不会在每次键入字母时都执行该操作，但类似的操作应该可以：

handleNameChange = (e) => setName(e.target.value);

useEffect(() => {
  const ... = useQuery(...);
}, [name])

---

因此，每当名称更改时，是否要启动查询？我想你想要

useffect

const handleNameChange = e => setName(e.target.value);

useEffect(() => {
  // I'm assuming you'll also want to pass name as a variable here somehow
  const [loading, error, data] = useQuery(myGraphQLQuery);
}, [name]);

---

如果您不想控制何时触发请求，则必须使用

useLazyQuery

（），如下所示：

import React, { useState } from "react";
import { useLazyQuery } from "@apollo/client";
import { myGraphQLQuery } from "../../api/query/myGraphQLQuery";

// functional component
const HooksForm = props => {
  // create state property 'name' and initialize it
  const [name, setName] = useState("Peanut");
  const [doRequest, { called, loading, data }] = useLazyQuery(myGraphQLQuery)

  const handleNameChange = e => {
    setName(e.target.value);
    doRequest();
  };

  return (
    <div>
      <form>
        <label>
          Name:
          <input
            type="text"
            name="name"
            value={name}
            onChange={handleNameChange}
          />
        </label>
      </form>
    </div>
  );
};

export default HooksForm;

import React，{useState}来自“React”；
从“@apollo/client”导入{useLazyQuery}；
从“../../api/query/myGraphQLQuery”导入{myGraphQLQuery}”；
//功能部件
const HooksForm=props=>{
//创建状态属性“name”并初始化它
const[name，setName]=useState（“花生”）；
const[doRequest，{调用，加载，数据}]=useLazyQuery（myGraphQLQuery）
常量handleNameChange=e=>{
设置名称（如目标值）；
doRequest（）；
};
返回(
姓名：
);
};
导出默认钩子窗体；

这不起作用。我收到以下错误消息：无法在回调中调用React钩子“useQuery”。必须在React函数组件或自定义React钩子函数React钩子/规则中调用React钩子-hooks@nino你能试着把这个钩子包装在一个函数中并调用这个函数吗？你不能在函数中调用钩子！：）钩子必须位于组件的顶层。这不起作用。我收到以下错误消息：无法在回调中调用React钩子“useQuery”。React钩子必须在React函数组件或自定义React钩子函数React钩子/钩子规则支持的文档链接中调用