feat: Fix call stack for useKeepAliveEffect, Fix name error

demo/src/index.js

@@ -43,14 +43,14 @@ function App() {
         <Route
           path="/b"
           render={() => (
-            <KeepAlive key="B"><B /></KeepAlive>
+            <KeepAlive name="A"><B /></KeepAlive>
 
           )}
         />
         <Route
           path="/c"
           render={() => (
-            <KeepAlive key="C">
+            <KeepAlive name="B">
               <C />
             </KeepAlive>
           )}

demo/src/views/A.js

-import React, {useState} from 'react';
+import React, {useState, useEffect} from 'react';
 import {useKeepAliveEffect} from '../../../es';
 
 function Test() {
   const [index, setIndex] = useState(0);
   useKeepAliveEffect(() => {
-    console.log('activated');
+    console.log('activated', index);
+    const i = 0;
 
     return () => {
-      console.log('unactivated');
+      console.log('unactivated', index, i);
     };
   });
   return (

package.json

 {
   "name": "react-keep-alive",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Package will allow components to maintain their status, to avoid repeated re-rendering.",
   "author": "Shen Chang",
   "homepage": "https://github.com/Sam618/react-keep-alive",

src/components/KeepAlive.tsx

@@ -7,10 +7,13 @@ interface IKeepAliveProps {
   key?: string;
   name?: string;
   disabled?: boolean;
+}
+
+interface IKeepAliveInnerProps extends IKeepAliveProps {
   _container: any;
 }
 
-class KeepAlive extends React.PureComponent<IKeepAliveProps> {
+class KeepAlive extends React.PureComponent<IKeepAliveInnerProps> {
   private bindUnmount: (() => void) | null = null;
 
   public componentDidMount() {

src/components/Provider.tsx

@@ -94,8 +94,10 @@ export default class KeepAliveProvider extends React.PureComponent<IKeepAlivePro
     this.forceUpdate();
   }
 
-  public componentDidCatch() {
-    warn('[React Keep Alive] Cached components have duplicates. Please check the <KeepAlive> component of the key duplication!');
+  public componentDidCatch(_: any, info: any) {
+    if (info.componentStack.indexOf(keepAliveProviderTypeName) !== -1) {
+      warn('[React Keep Alive] Cached components have duplicates. Please check the <KeepAlive> component of the key duplication!');
+    }
   }
 
   public unactivate = (identification: string) => {

src/utils/keepAliveDecorator.tsx

@@ -283,6 +283,7 @@ export default function keepAliveDecorator<P = any>(Component: React.ComponentTy
         ? (
           <TriggerLifecycleContainer
             {...wrapperProps}
+            key={propKey}
             propKey={propKey}
             keepAlive={combinedKeepAlive}
           />

src/utils/useKeepAliveEffect.tsx

-import React, {useEffect, useContext} from 'react';
+import React, {useEffect, useContext, useRef} from 'react';
 import {warn} from './debug';
 import {COMMAND} from './keepAliveDecorator';
 import IdentificationContext, {IIdentificationContextProps} from '../contexts/IdentificationContext';
@@ -11,15 +11,17 @@ export default function useKeepAliveEffect(effect: React.EffectCallback) {
     eventEmitter,
     identification,
   } = useContext<IIdentificationContextProps>(IdentificationContext);
+  const effectRef: React.MutableRefObject<React.EffectCallback> = useRef(effect);
+  effectRef.current = effect;
   useEffect(() => {
     let bindMount: (() => void) | null = null;
     let bindUnmount: (() => void) | null = null;
-    let effectResult = effect();
+    let effectResult = effectRef.current();
     let unmounted = false;
     eventEmitter.on(
       [identification, COMMAND.MOUNT],
       bindMount = () => {
-        effectResult = effect();
+        effectResult = effectRef.current();
         unmounted = false;
       },
       true,