Reactjs useEffect 获取数据后的清理功能

Question

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

我见过一些像这样的 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;
        }
    },[])

Answer 1

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

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

• 您可以将 mountedTodos 定义为一个对象并将其传递给 getTodos 函数。

但是，我建议您使用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();
},[])

注意:您应该在 useEffect 钩子(Hook)的依赖数组中添加 getTodos ，为了避免状态更新和重新渲染的无限循环，请包装 getTodos 在 useCallback 钩子(Hook)中。