fix: 更正按钮点击时，UI DOM展示state不一致问题，正确渲染list的长度，补充TS参数类型的定义

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>
 };

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>
     )

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);