数据更改后停止执行功能（React，useEffect）

Question

我有一个函数 (startLoad())，每次我的一些数据发生变化时都会执行该函数 (即 dataMayChange)。在此方法中，我想执行一些 GraphQL 查询（即 fireQuery1、fireQuery2 等）。每次我的 dataMayChange 发生变化时，我都想停止执行 startLoad 并从头开始重新执行。这样我想在我的 dataMayChange 更改为被触发之前阻止旧查询。

这是我的代码：

 React.useEffect(() => {   
        startLoad()     
    // eslint-disable-next-line
}, [dataMayChange])

const startLoad = async() => {
  await fireQuery1
  await fireQuery2
  await fireQuery3
  await fireQuery4
}

有人知道我如何实现这种行为吗？

Answer 1

您正在寻找的是可以提供给 startLoad 以告诉它停止的标志或信号，以及 useEffect 上的 cleanup callback。

您可以定制旗帜或信号，或使用 AbortController。这是后者的一个例子，但你自己动手做看起来非常相似：

React.useEffect(() => {   
    const controller = new AbortController();
    startLoad(controller.signal);
    return () => {
        // This function is called when the data is changing and the
        // effect callback is about to be re-run
        controller.abort();
    };
    // eslint-disable-next-line
}, [dataMayChange]);

const startLoad = async (signal) => {
    await fireQuery1;
    if (signal.aborted) {
        return;
    }
    await fireQuery2;
    if (signal.aborted) {
        return;
    }
    await fireQuery3;
    if (signal.aborted) {
        return;
    }
    await fireQuery4;
};

这是相当重复的，您可能想将您的操作放在一个数组中并循环遍历它。很难证明 fireQuery1 等显然只是概念性占位符，但例如：

const startLoad = async (signal) => {
    const tasks = [doThis, doThat, doTheOther, doSomethingElse];
    for (const task of tasks) {
        if (signal.aborted) {
            return;
        }
        await task(); // You can even keep track of its result to pass to the next if relevant, etc.
    }
};

如果这些操作中的任何一个涉及支持 AbortController/AbortSignal 的事物（例如 fetch），您也可以将信号传递给那些事物。

数据更改后停止执行功能（React，useEffect）

Stop executing function after data change (React, useEffect)

javascript

ecmascript-6

reactjs

graphql

use-effect