在未安装的组件上响应状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏

Question

我正在练习 AWS 的 Cognito。对于前端，我使用 React，对于路由，我使用 React-router-dom。对于 Cognito 验证，我使用 amazon-cognito-identity-js package. My Congito signin, signup and confirmation logic works fine. I made one helper function where I validate the Congnito. and reuse it in different component. I split my Nav bar into two components. From Congnito current user I made one callback function and use it in useEffect, and dependencies put the callback function, by default getAuthenticatedUser is null. I add condition where it fetch the data, if getAuthenticatedUser then redirect to signin and signup page. Because of this condition I am getting the error: Can't perform a React state update on an unmounted component...... Also when I signed in it does not change the nav bar name, I have to refresh the browser then I can see the change. I share my code in codesandbox.

这是我的辅助函数

    import React, { useState, useCallback, useEffect, useMemo } from 'react';
import { CognitoUserPool } from 'amazon-cognito-identity-js';

const Pool_Data = {
  UserPoolId: 'us-east-1_IEyFfUupx',
  ClientId: '63fc9g5c3g9vhqdalrv9eqhoa2',
};

export default function useHandler() {
  const [state, setstate] = useState({
    loading: false,
    isAuthenticated: false
  })

  const { loading, isAuthenticated } = state;

  const userPool = new CognitoUserPool(Pool_Data)

  const getAuthenticatedUser = useCallback(() => {
    return userPool.getCurrentUser();
  },
    [],
  );

  console.log(getAuthenticatedUser());


  useEffect(() => {
    getAuthenticatedUser()
  }, [getAuthenticatedUser])

  const signOut = () => {
    return userPool.getCurrentUser()?.signOut()
  }
  console.log(getAuthenticatedUser());

  return {
    loading,
    isAuthenticated,
    userPool,
    getAuthenticatedUser,
    signOut
  }
};

这是我的导航

import React, { useEffect } from "react";
import { Link } from "react-router-dom";
import SigninLinks from './SigninLinks';
import SignoutLinks from './SignoutLinks';
import useHandlder from '../configHandler/useHandler';


const Nav = () => {
  const { getAuthenticatedUser } = useHandlder();


  const Links = getAuthenticatedUser() ? <SigninLinks /> : <SignoutLinks />
  return (
    <nav className="nav-wrapper grey darken-3">
      <div className="container">
        <h2 className="brand-logo">Logo</h2>
        {
          Links
        }

      </div>
    </nav>
  );
};

export default Nav;

这是显示数据和出现错误的主屏幕

import React, { useState, useEffect } from "react";
import { api } from './api';
import useHandlder from './configHandler/useHandler'
import { Redirect } from 'react-router-dom';

const Home = () => {
  const [state, setstate] = useState([]);
  const { getAuthenticatedUser } = useHandlder();

  useEffect(() => {
    fetchData()
  }, [])

  const fetchData = async () => {
    const response = await fetch(`https://jsonplaceholder.typicode.com/posts`);
    const data = await response.json();
    setstate(data)
  }

  return getAuthenticatedUser() === null ? <Redirect to="/signin" /> : //In here is the //error happening.
    <div className="row">
      <h1>hello welcome to home</h1>
      {
        state?.map((i: string, id: number) => <h1 key={id}>{i.title}</h1>)
      }
    </div>

};

export default Home;

Answer 1

问题

问题是您的应用在主 ("/") 路径上启动并呈现 Home 组件。 Home 在挂载时发起 GET 请求并检查是否有经过身份验证的用户，如果有 none，则重定向到您的“/signin”路由。

fetch 是 异步的 所以当重定向发生时 GET 请求正在解析 after Home 有已卸载并尝试使用响应数据更新本地状态，但不能。

解决方案

您需要使用 Abort Controller 来取消飞行中的请求。如果组件卸载，效果清理函数会取消获取请求。在 Home 中更新 useEffect 挂钩以创建 AbortController 和 signal 以用于清理函数。

useEffect(() => {
  const controller = new AbortController(); // <-- create controller
  const { signal } = controller; // <-- get signal for request

  const fetchData = async () => {
    const response = await fetch(
      `https://jsonplaceholder.typicode.com/posts`,
      { signal } // <-- pass signal with options
    );
    const data = await response.json();
    setstate(data);
  };

  fetchData();

  return () => controller.abort(); // <-- return cleanup function to abort
}, []);

在未安装的组件上响应状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏

React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application

callback

reactjs

amazon-cognito

react-hooks

use-effect

问题

解决方案

演示