Question

在这里用钩子挣扎。

我在组件内部有以下代码：

  const {isLoading, abortRequest} = props;

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

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

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

有什么办法解决这个问题吗？

Answer 1

useCallback将返回一个已记忆的回调版本，仅当其中一个依赖项已更改时才会更改

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

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

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

1 个答案: