fix: 1.在state外操作state；2.map缺少key；3.类型定义；4.行内样式修正；

src/components/EventEmitterButton.tsx

@@ -1,15 +1,18 @@
-import React, { useState } from 'react';
-import { layoutEmitter } from '@/utils/EventEmitter';
+import React, { useState } from "react";
+import { layoutEmitter } from "@/utils/EventEmitter";
 
-export default ({ initNumber }) => {
+export default ({ initNumber }: { initNumber: number }) => {
+  const [state, setstate] = useState<number>(initNumber);
 
-    const [state, setstate] = useState(initNumber);
-
-    return <button
-        style={{ fontSize: '30px' }}
-        onClick={() => {
-            setstate(state + 1)
-            layoutEmitter.emit({ state });
-        }}
-    >EventEmitter {state} </button>
+  return (
+    <button
+      style={{ fontSize: "0.3rem" }}
+      onClick={() => {
+        setstate(state + 1);
+        layoutEmitter.emit({ state });
+      }}
+    >
+      EventEmitter {state}{" "}
+    </button>
+  );
 };

src/pages/index.tsx

@@ -1,25 +1,45 @@
-import React, { useEffect, useState } from 'react';
-import { layoutEmitter } from '@/utils/EventEmitter';
-import EventEmitterButton from '@/components/EventEmitterButton';
-
+import React, { useEffect, useState } from "react";
+import { layoutEmitter } from "@/utils/EventEmitter";
+import EventEmitterButton from "@/components/EventEmitterButton";
+interface ListItemProps {
+  state?: number;
+}
 export default () => {
-    const [list, setList] = useState([]);
+  const [list, setList] = useState<ListItemProps[]>(() => []);
+
+  useEffect(() => {
+    layoutEmitter.useSubscription((data) => {
+      // 按你们的写法实现的
+      // bug 重现步骤
+      // 点击 EventEmitterButton 两次
+      // 点击 Add List 一次
+      // 点击 EventEmitterButton 一次
+      // 期望结果
+      // 11
+      // 12
+      // 时间戳
+      // 13
+      list.push(data as ListItemProps);
+      setList([...list]);
+    });
+  }, []);
 
-    useEffect(() => {
-        layoutEmitter.useSubscription((data) => {
-            list.push(data);
-            console.log(data);
-            console.log(list);
-            setList(list);
-        });
-    }, [])
-    return (
-        <div>
-            <EventEmitterButton initNumber={11} />
-            <p>list length:{list.length}</p>
-            {
-                list.map(item => <p>{item.state}</p>)
-            }
-        </div>
-    )
+  return (
+    <div>
+      <EventEmitterButton initNumber={11} />
+      <button
+        style={{ fontSize: "0.6rem" }}
+        onClick={() => {
+          // setList([...list, { state: new Date().getTime() }]); // 不会触发 useEffect，也就不会 re-render
+          layoutEmitter.emit({ state: new Date().getTime() }); // fixed: 每次点击提交一个 emit，触发 subscription，进行 setList。
+        }}
+      >
+        Add List
+      </button>
+      <p>list length:{list.length}</p>
+      {list.map((item) => (
+        <p key={item.state}>{item.state}</p>
+      ))}
+    </div>
+  );
 };