reactjs 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;
  };
}, []);

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;
        }
    },[])

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();
},[])

Reactjs相关问答推荐

是否可能有不同的加载器用于路径有查询参数和没有查询参数，或者在React Router 6中添加它们时有条件地跳过一个加载器？

TypeError：SearchProduct.get()获得了意外的关键字参数查询'

面对动画警告：未指定`useNativeDriver`.这是必需的选项，并且必须在REACT本机中显式设置为`true`或`False`

在React Create App TS项目中安装material UI

悬停轴时重新绘制自定义参照线

使用 React + Vite 范围化 CSS

单击按钮不会切换组件(当按钮和组件位于两个单独的文件中时)

react 本机屏幕转换

列表中的每个子项都应该有一个唯一的keyprops .在react 应用程序中

如何管理可重用无线电输入的 React 状态？

在Vite React上获取Amplify的环境变量

虽然通过了身份认证，但并没有导航到请求的页面

如何使用 React 更改 Material UI 中 ButtonGroup 的 colored颜色 ？

页面加载时不显示数组中的数据

Cypress - 替换 React 项目中的变量

用 scss 覆盖 MUI

.filter() 函数在删除函数中创建循环 - React

单击按钮时获取react 表中每一行的属性

Rtk 查询无效标签不使数据无效

根据计算 ReactJs 更新输入字段