diff --git a/src/components/EventEmitterButton.tsx b/src/components/EventEmitterButton.tsx index 0b15358..78678fa 100644 --- a/src/components/EventEmitterButton.tsx +++ b/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(initNumber); - const [state, setstate] = useState(initNumber); - - return + return ( + + ); }; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index dd45813..a67e81c 100644 --- a/src/pages/index.tsx +++ b/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(() => []); + + 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 ( -
- -

list length:{list.length}

- { - list.map(item =>

{item.state}

) - } -
- ) + return ( +
+ + +

list length:{list.length}

+ {list.map((item) => ( +

{item.state}

+ ))} +
+ ); };