From 65b7d4e5ffc7e554dc656282212e6179f0f53e99 Mon Sep 17 00:00:00 2001
From: iFoli <42626941+iFoli@users.noreply.github.com>
Date: Tue, 28 Jul 2020 17:58:13 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=9B=B4=E6=AD=A3=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=E6=97=B6=EF=BC=8CUI=20DOM=E5=B1=95=E7=A4=BAs?=
 =?UTF-8?q?tate=E4=B8=8D=E4=B8=80=E8=87=B4=E9=97=AE=E9=A2=98=EF=BC=8C?=
 =?UTF-8?q?=E6=AD=A3=E7=A1=AE=E6=B8=B2=E6=9F=93list=E7=9A=84=E9=95=BF?=
 =?UTF-8?q?=E5=BA=A6=EF=BC=8C=E8=A1=A5=E5=85=85TS=E5=8F=82=E6=95=B0?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E7=9A=84=E5=AE=9A=E4=B9=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/EventEmitterButton.tsx | 27 +++++++++++++++++++++------
 src/pages/index.tsx                   | 18 +++++++++++++++---
 src/utils/EventEmitter.ts             |  2 +-
 3 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/src/components/EventEmitterButton.tsx b/src/components/EventEmitterButton.tsx
index 0b15358..abc803c 100644
--- a/src/components/EventEmitterButton.tsx
+++ b/src/components/EventEmitterButton.tsx
@@ -1,15 +1,30 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { layoutEmitter } from '@/utils/EventEmitter';
 
-export default ({ initNumber }) => {
-
-    const [state, setstate] = useState(initNumber);
+interface ItemProps {
+    initNumber: number;
+}
 
+// 1. initNumber需要定义参数类型
+export default ({ initNumber = 0 }: ItemProps) => {
+    // 2. setstate 需要驼峰标识
+    const [state, setState] = useState(initNumber);
+    const [flag, setFlag] = useState(true);
+    // 因为index中使用了当前组件，所以在index将元素挂载到DOM上都会调用当前组件的useEffect
+    // 而这时候EventEmitters中的this.subscriptions = subscription;并未执行，会报错
+    // 这里设置了一个flag来控制第一次挂载到DOM不执行useEffect中的回调函数
+    useEffect(() => {
+        if (!flag) {
+            layoutEmitter.emit({ state });
+        }
+    }, [state])
+    // 3.setState() 是异步更新，将layoutEmitter.emit({ state });放在button的点击事件中
+    // 会一直拿不到最新的值。解决方法：通过useEffect来实现当state改变把最新的值传给layoutEmitter.emit({ state })
     return <button
         style={{ fontSize: '30px' }}
         onClick={() => {
-            setstate(state + 1)
-            layoutEmitter.emit({ state });
+            setState(state => state + 1)
+            setFlag(false)
         }}
     >EventEmitter {state} </button>
 };
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index dd45813..e035cd0 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -2,23 +2,35 @@ import React, { useEffect, useState } from 'react';
 import { layoutEmitter } from '@/utils/EventEmitter';
 import EventEmitterButton from '@/components/EventEmitterButton';
 
+interface ItemProps {
+    state: number;
+}
+
+interface State {
+    state: number
+}
 export default () => {
-    const [list, setList] = useState([]);
+    const [list, setList] = useState([] as Array<State>);
 
     useEffect(() => {
         layoutEmitter.useSubscription((data) => {
             list.push(data);
             console.log(data);
             console.log(list);
-            setList(list);
+            // 4. list 为数组，引用数据类型，我们不能直接操作state要结构出来
+            const listData = [...list]
+            setList(listData);
         });
     }, [])
+
     return (
         <div>
             <EventEmitterButton initNumber={11} />
             <p>list length:{list.length}</p>
             {
-                list.map(item => <p>{item.state}</p>)
+                // 5. item中state的参数类型
+                // 6. 通过map循环需要给标签加唯一的key
+                list.map((item: ItemProps) => <p key={item.state}>{item.state}</p>)
             }
         </div>
     )
diff --git a/src/utils/EventEmitter.ts b/src/utils/EventEmitter.ts
index f48c4ed..7115609 100644
--- a/src/utils/EventEmitter.ts
+++ b/src/utils/EventEmitter.ts
@@ -7,7 +7,7 @@ class EventEmitter<T> {
         this.subscriptions(val);
     };
 
-    useSubscription = (callback: Subscription<T>) => {
+    useSubscription = (callback: Subscription<any>) => {
         function subscription(val: T) {
             if (callback) {
                 callback(val);