Quiero hacer un juego en el que algunos elementos caigan desde la parte superior y, si se hace clic en ellos, desaparezcan y aumenten la puntuación, pero no puedo ver los elementos.
Uso setInterval para insertar los elementos aleatorios en la lista a intervalos y representar la lista de elementos.
Si pongo una lista fija, muestra los artículos pero todos al mismo tiempo. Quiero que los artículos sigan añadiéndose continuamente. Está bien no usar el intervalo. Simplemente no sé de otra manera.
códigos:
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]);el regreso
<IonPage className="Game"> <h1 id="startTimer">{Number((sec / 10).toFixed(0))}</h1> { DgArray.map((value, idx) => <Dg kind={value} DgNum={idx}></Dg>)} </IonPage >en la consola, el DgArray sigue agregando.
y encontré usando el punto de interrupción en el componente Dg que va al componente Dg, pero no regresa ni siquiera en el componente.
Es probable que su problema sea que su IonPage (que supondré que está diseñado para representar niños) no sepa volver a procesar cuando cambia DgArray porque está fuera del estado de cualquier componente.
Un enfoque para solucionar esto sería hacer que DgArray sea el estado de un nuevo componente (posiblemente envolviendo su IonPage para que pueda usar el mismo DgArray.map ) y pase setDgArray a su componente con setInterval para actualizarlo allí.