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

Posted 2023-03-08

【中文标题】数据更改后停止执行函数（React，useEffect）

【英文标题】：Stop executing function after data change (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

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

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

【讨论】：

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