typescript 如何在多个依赖项同时更改时仅运行一次useEffect

zbdgwd5y 于 2023-03-04 发布在 TypeScript

关注(0)|答案(1)|浏览(383)

我使用的useEffect钩子有两个依赖项，如下所示：

useEffect(() => { ..... }, [apiData, currentMeasurements]);

注意，apiData是通过apollo/client的useLazyQuery获得的。

现在，在保存时（例如，保存或提交表单），两个依赖项同时更改，即获取apiData，并且使用setState将currentMeasurements设置为新数组（即setCurrentMeasurements（[]））。
由于API调用需要时间，因此React在设置currentMeasurements时执行一次useEffect，并在返回API响应时再执行一次。
但这不是预期的行为。这会导致在呈现useEffect时第一次在屏幕上呈现旧值（因为currentMeasurements中的更改），几秒钟后，呈现新数据（当useEffect再次运行时，因为我们获得了newApiData）。

如何使useEffect仅在返回API响应时运行？或者换句话说，如何使useEffect仅在获得两个依赖项准备好传入useEffect时运行。

我试过但不起作用的事情：使用setTimeOut（带有自定义时间）更新currentMeasurements，但这会在API响应延迟时导致问题。

typescript

来源：https://stackoverflow.com/questions/75571045/how-to-run-useeffect-only-once-when-multiple-dependencies-change-at-a-same-time

1条答案

按热度按时间

j5fpnvbx1#

可以将两个依赖项都保存为引用，然后检查是否都发生了更改。如果没有，则不执行任何操作。如果发生了更改，则更新引用。

const changedRef = useRef({});
useEffect(() => { 
  if(changedRef.current.currentMeasurements !== currentMeasurements &&
     changedRef.current.apiData !== apiData) {
    
    ... // do something
    
    changedRef.current = {
      apiData
      currentMeasurements
    };
  }
}, [apiData, currentMeasurements]);

然而，使用中断条件更容易-即如果currentMeasurements的长度为0，则不要在useEffect内执行任何操作：

useEffect(() => { 
  if(currentMeasurements.length === 0) return;
  
  ... // do something
}, [apiData, currentMeasurements]);

展开查看全部

赞(0）回复(0）举报 2023-03-04

我来回答

typescript 如何在多个依赖项同时更改时仅运行一次useEffect

1条答案

相关问题

热门标签

最新问答