使用 useQuery 钩子和 useEffect 钩子反应

Question

当 useEffect 挂钩被触发时，如何等待 useQuery 挂钩完成？

我有一个非常复杂的功能组件，并且我正在触发一个 useEffect 挂钩，其依赖项来自祖父母功能组件。useQuery 钩子和 useEffect 钩子都可以成功工作。然而，当 useEffect 钩子被触发时，它不会等待查询完成就执行 useEffect 调用的函数。

失败的解决方案#1：我尝试使用async和await，但是当你使用returnawait时，你只是“uwrapping”一个承诺，只是为了再次“包装”该值（因为你在一个async函数中），所以它是多余的。

解决方案 #2 失败。我可以使用 .then() 但需要调用的函数将在 .then() 内，我将如何从 useEffect 中调用它。

const data = useQuery('lists', ...{promise is returned)..);
const functionToBeCalled = () => { //uses data }
useEffect(() => {
        if (grandparent prop) { functionToBeCalled()}
    }, [grandparent prop]);

任何支持将不胜感激。

Answer 1

该代码对我来说看起来不太正确 -useQuery不data直接返回，你必须解构它。在没有看到实际编写的代码的情况下，我认为您所追求的答案是您需要将其添加data为效果的依赖项：

const { data } = useQuery(/* ... */);

const functionThatUsesData = () => log('DATA:', data);

useEffect(() => {
    if (!(grandparentProp && data)) return;
    functionThatUsesData();
}, [grandparentProp, data]);