React cancel out of Promise on props change

Question

我有一个采用 visible bool 属性的 React 组件。 react 执行一个触发长时间运行的 Promise 的函数，当visible 更改时，我需要取消 Promise。然而，试图从外部拒绝 Promise 并不会停止执行。

代码的大致轮廓如下所示：

<ComponentA visible={visible} />

const ComponentA = ({ visible }) => {
   const [rejectFn, setRejectFn] = useState(() = () => console.log('test');

    useEffect(() => {
        if (visible) {
            ...
        } else {
            setRejectFn();
        }
    }, [visible]);

   const promiseFn = () => (
       new Promise((resolve, reject) => {
            // logic

            const endCallback = (error) => {
                if (error) {
                    reject(error);
                    console.log('error', error);
                } else {
                    resolve(...);
                }
            };

            setRejectFn(() = () => endCallback('exit early'));

            someOtherFn(..., endCallback); // processing file chunk by chunk
       })
   );

   const onDivClick = () => (
      // set some state vars
      promiseFn()
          .then(() => ...)
          .catch(() => ...)
          .finally(() => ...);
   );

   return (
      <div onClick=(onDivClick) />
   );
}

上述代码将触发rejectFn 并记录"exit early"，但Promise 将继续执行直到完成。

Answer 1

给你：

你不能取消正在进行的承诺请求，但你可以这样做

  const visibleRef = useRef(visible); // using ref to get latest value inside setInterval

  useEffect(() => {
    visibleRef.current = visible;
    console.log("visible", visible);
  }, [visible]); // <--- Set the value of visible whenever it changes

  const promiseFn = () =>
    new Promise((resolve, reject) => {
      // logic

      // Will check visibleRef.current every second , you can reduce the time as your need
      const interval = setInterval(() => {
        if (!visibleRef.current) { 
          reject("Due to Visible false value");
          clearInterval(interval);
        }
      }, 1000); 

      // just to mock the promise event execution
      setTimeout(() => {
        resolve();
        clearInterval(interval);
      }, 5000);
    });

工作演示

请检查控制台，这将帮助您了解演示