1

我有一个看起来像这样的钩子

export const useThing = id => {
    const { stopPolling, startPolling, ...result } = useQuery(GET_THING, {
        fetchPolicy: 'cache-and-network',
        variables: { id },
        skip: !id
    });

    return {
        startPolling,
        stopPolling,
        thing: result.data.thing,
        loading: result.loading,
        error: result.error
    };
}

然后在我的组件中，我正在做这样的事情；

const {loading, error, thing, startPolling, stopPolling} = useThing(id);

// this is passed as a prop to a childComponent
const onUpdateThing = ()=> {
   setShowInfoMessage(true);
   startPolling(5000);
}

const verficationStatus = thing?.things[0]?.verificationStatus || 'PENDING';
useEffect(()=> {
   if(verficationStatus === 'FAILED' || verificationStatus === 'SUCCESS') {
   stopPolling();
 }
}, [verificationStatus])

我正在使用startPollingandstartPolling函数来动态轮询查询。这种方法的问题在于，每当我开始轮询时，假设间隔为 3 秒，组件将每 3 秒重新渲染一次。我希望组件仅在服务器发送更新的响应时呈现。这是我尝试调试的几件事；

  • 我尝试使用 React Dev Tools 分析组件，它显示hooks changed为重新渲染的原因。
  • 我useEffect在我的组件中使用了多个 s，所以我的下一个想法是检查是否有任何一个useEffect导致重新渲染。我尝试在useEffect调用中添加和删除每个依赖项，但似乎没有帮助。
  • 我也没有存储状态中返回的任何值。
  • 子组件调用mutation.
  • 我也尝试过使用React.memo，但它导致的问题多于解决的问题。

任何关于可能导致问题的想法将不胜感激。

4

0 回答 0