React-query 不刷新组件

Question

我遇到了 react-query 的问题。如果正在获取 integrationDetails 查询，我有一个组件，其中包含显示加载微调器的组件。但是当查询完成获取时，我的组件根本不会更新。我尝试创建状态然后使用它，但问题仍然存在。

UPDATE：组件确实会更新，但子组件不会。

...

  const currentWorkspace = useGetCurrentWorkspaceDetail();
  const integrationDetails = useGetIntegrationDetails();
  useEffect(() => {
    integrationDetails.refetch(); //force refetch the query whenever I enter the page.
//problem persists even if I comment this part out
  }, []);

  useEffect(() => {
    console.log(integrationDetails.isFetching); //this logs true and then false.
  }, [integrationDetails]);

  if (currentWorkspace.isLoading) {
    return (
      <div className={styles.layout}>
        <LoadingSpinner />
      </div>
    );
  }


  return (
    <div className={styles.layout}>
      <div className={styles.rest}>
        <div className={styles.column}>
          <Card>
            <CardTabs tabs={["1"]}>
              <div>
                <h3>Global Tracking Code</h3>
                <div style={{ marginTop: 12 }}>
                  <StatusStripe
                    isLoading={integrationDetails.isFetching}
                    ...
                  />
                </div>
                ...

Answer 1

你的第一个 useEffect 就像componentDidMount 一样，它只会在第一次渲染时被调用，因为你在它的第二个参数中传递了一个空列表，即[]。 您可以在第二个 useEffect 中编写逻辑，您可以在其中知道何时获取数据，并且可以在那里进行状态设置或绑定。