Reactjs 如何从其他组件访问 useQuery refetch 方法

发布于12月06日

NextJS应用程序，呈现一个标题和一个主页/联系人/关于页面:

Simplified 100

export default function MyApp({ Component, pageProps }: Props) {
  return (
    <>
      <Header />
      <Component {...pageProps} />
    </>
  );
}

联系人页面有几个过滤器，它使用一个定制的useContacts钩子(使用react-query中的useQuery)来获取和呈现匹配的联系人.

Simplified Contacts page个

export default function ContactsPage() {
  const [filters, setFilters] = useState(...);
  const contactsInfo = useContacts(filters);

  // render matched contacts
}

标题有一个按钮，它调用一个模式，允许搜索平台上的人并将他们添加为联系人.

当成功添加联系人并且用户在联系人页面上时，我想重新获取联系人(具有当前 Select 的所有过滤器)，以便新添加的联系人在页面上立即可见(假设他们通过了当前 Select 的过滤器).

我觉得我很想打contactsInfo.refetch()，但我打不通contactsInfo.

Add to contact success callback个

onSuccess: () => {
  if (isContactsPage()) { // assume we have a way to identify this
    // How can I have access to `contactsInfo` here?
    contactsInfo.refetch();
  }
}

有什么建议如何最好地组织这件事吗？

Reactjs 如何从其他组件访问 useQuery refetch 方法

推荐答案

Reactjs相关问答推荐

在React Create App TS项目中安装material UI

捕获表单数据时的Reactjs问题

这两个子元素在Reaction Native中使用的有什么不同？

使用自动播放的视频组件呈现登录页面时出现JEST测试错误

透明MOV文件未出现在我的React网页中

我无法通过 useContext 显示值

验证 Yup 中的对象项

useEffect内部的RETURN语句在首次按钮点击事件中似乎无效的原因是什么？

try 从 React JS 构建此教程游戏但无法继续前进

Material UI @mui/material/Button vs @material-ui/core/Button，它什么时候改变的，旧版本的文档在哪里

无法访问 usefocusEffect 中 const 的更新状态

Recharts 笛卡尔网格 - 垂直线和水平线的不同样式

ReactJS：在导航栏中使用 Select inside Link 组件时如何避免重定向？

React Native PermissionsAndroid 不包括 READ_MEDIA_IMAGES.如何解决这个问题？

在 redux 中分派到另一个减少时状态值不会改变

使用 react-router-dom 时弹出空白页面

ReactJS：useMemo 钩子修复了我的无限重新渲染问题而不是 useEffect

谁能根据经验提供有关 useEffect 挂钩的更多信息

哪个 PrivateRouter 实现更好：高阶组件还是替换？

可以'读取未定义的属性(读取'路径')