返回上一屏幕时执行 useQuery() 钩子反应原生堆栈导航器

Question

我知道 React 中的固定规则之一是，您不能在功能组件的方法内执行任何钩子，甚至不能在其他钩子（如 useEffect 钩子）内执行。它必须在组件本身的主体中执行。

所以今天在开发一个测验应用程序时，我遇到了这样一种情况，在通过堆栈导航器上的屏幕后，我想通过单击后退按钮再次返回到该屏幕。但这一次，我想使用 Apollo Client 提供的 useQuery 钩子，使用来自 graphql 查询的数据修改前一个屏幕上的信息。

我可以使用isFocused道具上的属性检测上一个屏幕是否处于焦点。如果它发生变化，那么我将使用 useQuery 再次获取数据。

我可以像这样简单地做到这一点：

    React.useEffect(() => {
        //how do I fetch data from here using useQuery if React prohibits me to use useQuery here?
    }, [props.isFocused]);

所以这是我的问题，有没有办法解决这个问题？我会很感激你的回应。

Answer 1

正如您所说，您不能在其他挂钩或方法内调用挂钩。换句话说，你不能有条件地调用钩子。如果您使用该useQuery钩子，则必须做好准备，它将在组件的每次重新渲染时运行查询（尽管它会缓存结果，因此您不必担心性能）。

相反，您应该只调用useQuery组件内部的挂钩，并强制更新焦点组件。它应该已经在焦点上重新渲染，因为道具isFocused可能发生了变化。如果没有的话可以参考这个。