javascript - 带有变量的 UseQuery：{} 来自 useEffect 的参数

Question

我正在尝试使用 variable:{} 参数运行 useQuery 挂钩，但我传递给变量的数据来自 useEffect Hook。

我知道我无法将 useQuery 传递给 useEffect，所以我一直将 useEffect 中的数据传递给状态变量，然后将其传递给 useQuery。

这实际上可以正常工作并且不会使应用程序崩溃，但它确实在实际工作之前遇到了大约 3 次错误挂钩

这是我的代码的外观

 const router = useRouter();

 const { id } = router.query;

 const [user, setUser] = useState({});

 const [profileTypeA, setProfileTypeA] = useState(false);

  let userData

useEffect(() => {
    async function getUser() {
      if (!router.isReady) return;
      const userDb = await getUserFromDb(id);
      if (userDb === undefined) {
        return <Error statusCode={404} />;
      } else {
        setUser(userDb?.data?.payload);
        if (userDb.data.payload.type === 'A') setProfileTypeA(true);

      }
    }
    getUser();
    return () => {
      consola.success('Cleanup profile page');
    };
  }, [router.isReady]);

  if (profileTypeA) {
    const { loading, error, data } = useQuery(QUERY_FOR_USER_TYPE_A, {
      variables: { id: user?.userId },
    });
    if (loading) return null;
    if (error) return <Error statusCode={404} />;
    userData = data?.moreData;
  }

我的问题是变量这是将动态数据传递给变量的最佳方式吗？

老实说，我意识到这是一个缺陷，我稍后会处理这个问题（也许我低估了）。但即使我将 useQuery 从 if 块中取出，错误仍然存​​在。

我的逻辑是这样的：

1. 在使用效果
   1. 从路由器获取 {id}
   2. 使用该 id 触发 getUserFromId(id)
   3. 带有数据库响应的 setUser()
2. 运行查询
   1. 从状态中获取用户并将其传递给变量：{} 进行查询
   2. 运行查询

我认为我的问题是 useEffect 在我的 useQuery 之后运行，所以我试图从 useEffect 获取的用户仍然是空的，但我不确定如何以及在哪里可以运行我的 useEffect 中的所有逻辑来获取我需要传递给变量的数据：{}

谢谢

标签： javascriptreactjsreact-hooks