时间戳

首页 > 解决方案 > 使用动态道具卸载时使用 useEffect 挂钩

javascript - 使用动态道具卸载时使用 useEffect 挂钩

问题描述

在这里与钩子搏斗。

我在组件中有以下代码：

  const {isLoading, abortRequest} = props;

  const cleanUp = React.useCallback(() => {
    if (isLoading) abortRequest();
  }, [isLoading, abortRequest]);

  React.useEffect(() => {
    return () => {
      cleanUp();
    };
  }, []);

我基本上是在组件卸载时尝试中止 AJAX 请求，并且取消必须仅在 propisloading设置为 true 时发生（最初它设置为 false 并在第一次发出请求时变为 true）。问题是我props.isLoading每次都得到一个陈旧的值，因此当组件卸载时它永远不会中止请求。我试图将 cleanUp 函数作为useEffect挂钩的依赖项包含在内，但这使得它在每次 cleanUp 回调更新时都运行，这不是我想要的。

知道如何解决这个问题吗？

标签： javascriptreactjs

解决方案

useCallback将返回回调的记忆版本，仅当依赖项之一发生更改时才会更改

您根本不需要使用useCallback钩子：

React.useEffect(() => {
    return () => {
      if (isLoading) abortRequest();
    };
  }, [isLoading]);

推荐阅读