反应 tsx 渲染间隔更改列表

Question

我想制作一个游戏，其中一些物品会从顶部掉落，如果点击它们就会消失并提高分数，但我看不到这些物品。

我使用 setInterval 每隔一段时间将随机项目推入列表并呈现项目列表。

如果我放一个固定列表，它会同时显示所有项目。我希望这些项目不断添加。不用interval也没关系。我只是不知道其他方式。

代码：

var DgArray:string[] = []

const [sec, setSec] = useState();

const time: any = useRef(10);
const timerId: any = useRef('startTimer');

useEffect(() => {
    timerId.current = setInterval(() => {
        setSec(time.current);
        time.current -= 1;
        console.log(time.current)
        DgArray.push(RandomKind()) //RandomKind returns a string
        console.log(DgArray)
    }, 1000);

    return () => clearInterval(timerId.current);
}, []);


if (time.current <= 0) {
        console.log("TimeOut");
        clearInterval(timerId.current);
    }
}, [sec]);

return

<IonPage className="Game">
        <h1 id="startTimer">{Number((sec / 10).toFixed(0))}</h1>
        { DgArray.map((value, idx) => <Dg kind={value} DgNum={idx}></Dg>)}
</IonPage >

在控制台中，DgArray 不断添加。

而且我发现使用 Dg 组件中的断点它会转到 Dg 组件，但它不会 return 即使在组件中也是如此。

Answer 1

您的问题很可能是您的 IonPage（我假设它是为呈现子项而设计的）不知道 re-render 什么时候 DgArray 发生变化，因为它在状态之外任何组件。

解决这个问题的一种方法是让 DgArray 成为新组件的状态（可能包装你的 IonPage 这样你就可以使用相同的 DgArray.map）然后你通过在 setDgArray 到你的组件 setInterval 更新它。

反应 tsx 渲染间隔更改列表

React tsx Render Intervally changing list

javascript

setinterval

typescript

reactjs