Question

我在react函数组件中处于搜索状态。

openid

因此，当用户提交表单时。我需要从搜索对象中获取数据。我所做的是：

    databaseReference = FirebaseDatabase.getInstance().getReference("orders");
    //databaseReference.addListenerForSingleValueEvent(valueEventListener);

    Query query = FirebaseDatabase.getInstance().getReference("orders")
            .orderByChild("orders")
            .equalTo("-M3efgPdS4X1ZYCCZTTf");

    query.addListenerForSingleValueEvent(valueEventListener);

    studentsList = new ArrayList<>();
}

违反了反应挂钩的第一条规则。我得到的错误是const [search, setSearch] = React.useState({ orgName: "", repoName: "" });。那么，我该如何使用呢？可以将useQuery放入useEffect挂钩中，该挂钩将在搜索对象更新时重新获取数据吗？

Answer 1

如果您需要执行查询来响应用户操作（例如按下按钮），则根本不应该使用useQuery，这就是useLazyQuery的目的。 useLazyQuery钩子将返回一个元组（就像useMutation一样），该元组由执行查询的函数和具有查询结果的对象组成。就像您将使用useMutation一样使用它，只是它不会返回Promise。

const [search, {loading, data, error}] = useLazyQuery(SEARCH_REPO, {
  variables : {orgName : search.orgName, repoName: search.repoName}
});
const handleSearch = (e) => {
  e.preventDefault();
  search();
};

Answer 2

您已经正确识别了问题，因为挂钩必须位于顶层。将useQuery放在useEffect中会导致相同的问题。

使用事件处理程序，您可以执行以下操作，例如将useQuery置于顶层，然后在处理程序中调用refetch（它是从useQuery返回的第四件事）。如果您知道您的组件将在事件上进行更新，那么仅使useQuery获取顶级数据（而不是useEffect中的数据）也是有效的。

在Apollo中提交表单后，如何从useQuery挂钩中获取数据？

2 个答案: