数据更改后停止执行函数（React，useEffect）答案

【问题标题】：Stop executing function after data change (React, useEffect)数据更改后停止执行函数（React，useEffect）
【发布时间】：2021-12-05 15:53:50
【问题描述】：

我有一个函数 (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
}

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

【问题讨论】：

标签： javascript reactjs ecmascript-6 graphql use-effect

【解决方案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），您也可以将信号传递给这些事物。

【讨论】：

非常感谢，这似乎有效！ :)