小编hus*_*zbc的帖子

React - 在获取数据并使用该数据设置状态后如何清理 useEffect() ?

我正在使用钩子 useEffect 向我的服务器发出获取请求,并且不断收到此警告:

警告:无法对已卸载的组件执行 React 状态更新。这是一个空操作,但它表明应用程序中存在内存泄漏。要修复此问题,请取消 useEffect 清理函数中的所有订阅和异步任务。

我明白这个警告的原因,但是我该如何清除它呢?我尝试过本文中建议的方法,但没有成功:https://dev.to/pallymore/clean-up-async-requests-in-useeffect-hooks-90h

这是我的代码:

import React, { useEffect, useState } from 'react';
import { Redirect, Route } from 'react-router-dom';

export default function ProtectedRoute({ component: Component, ...rest }) {
    
    const [ user, setUser ] = useState('');

    useEffect(() => {
        const fetchUser = async () => {
            try {
                const response = await fetch('http://localhost:5000/user', {
                    credentials: 'include'
                });

                const data = await response.json();

                setUser(data.session.passport.user);
            
            } catch (error) {
                console.log(error);
            }
        }

        fetchUser();

        return () => …
Run Code Online (Sandbox Code Playgroud)

fetch reactjs react-hooks use-effect

4
推荐指数
1
解决办法
1万
查看次数

标签 统计

fetch ×1

react-hooks ×1

reactjs ×1

use-effect ×1