用 useEffect 钩子反应 useQuery 钩子答案

【问题标题】：React useQuery hook with useEffect hook用 useEffect 钩子反应 useQuery 钩子
【发布时间】：2022-01-06 04:14:25
【问题描述】：

如何在触发 useEffect 挂钩时等待 useQuery 挂钩完成？

我有一个非常复杂的功能组件，我正在触发一个 useEffect 挂钩，它的依赖项来自祖父功能组件。 useQuery 钩子和 useEffect 钩子都能成功运行。但是，当 useEffect 钩子被触发时，它不会等待查询完成，然后执行由 useEffect 调用的函数。

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

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

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

非常感谢任何支持。

【问题讨论】：

标签： reactjs react-hooks react-query

【解决方案1】：

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

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

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

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

【讨论】：

我试过了，效果很好。谢谢:)