获取数据后reactjs useEffect清理功能

我已经阅读了一些使用 useEffect 的 Reactjs 良好实践。我遇到一种情况，我将函数分开来获取数据并在 useEffect 挂钩上调用它。在这种情况下我怎样才能做一些清理功能呢？ ？

我见过一些像这样的 useEffect 清理：

useEffect(() => {
  let isActive = true;

  fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then((response) => response.json())
    .then((data) => {
      if (isActive) {
        setTodo(data);
      }
    })
    .catch((error) => console.log(error.message));

  return () => {
    isActive = false;
  };
}, []);

从上面的示例中，获取函数位于 useEffect 内部，现在如果出现类似情况，我该如何执行一些清理：

const getTodos = async () => {        
        try {
            const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
            const todos = await response.json();
            if(todos) {
                setTodos(todos);
            }
        }catch(e) {
            console.log(e);
        }
    }    

useEffect(() => {
        let mountedTodos = true;
        getTodos();

        return () => {
            mountedTodos = false;
        }
    },[])

这可以通过多种方式处理。

• 你可以有mountedTodos作为组件外部的全局变量。

• 你可以定义mountedTodos作为一个对象并将其传递给getTodos功能。

但是，我建议您使用中止控制器 https://developer.mozilla.org/en-US/docs/Web/API/AbortController

const getTodos = async (signal) => {        
    try {
        const response = await fetch(/*url*/, { signal });
            const todos = await response.json();
            if(!signal.aborted) {
                setTodos(todos);
            }
        }catch(e) {
            console.log(e);
        }
    }    

useEffect(() => {
   const abortController = new AbortController();
   getTodos(abortController.signal);

   return () => abortController.abort();
},[])

注意：您应该添加getTodos在依赖数组中useEffect挂钩并避免状态更新和重新渲染的无限循环，包装getTodos in useCallback hook.