Hola, quiero llamar a un temporizador de cuenta regresiva al lado de otro componente en reaccionar, pero mi JS no funciona. Cuando coloco un componente fuera del otro, mi JS funciona bien. Quiero que lo ponga dentro del componente GlowBox. Como dije cuando apagué el GlowBox, todo está bien y funciona perfectamente.
import React, { Fragment } from 'react'; const Clock = ({ timerMinutes, timerSeconds }) => { return ( <Fragment> ... </Fragment> ); }; Clock.defaultProps = { timerMinutes: 3, timerSeconds: 0, }; export default Clock;!
import React, { useState, useEffect } from 'react'; function App() { const [timerMinutes, setTimerMinutes] = useState(); const [timerSeconds, setTimerSeconds] = useState(); let interval; const startTimer = () => { const countDownDate = new Date('May 30,2023 ').getTime(); interval = setInterval(() => { const now = new Date().getTime(); const distance = countDownDate - now; const minutes = Math.floor((distance % (60 * 60 * 1000)) / (1000 * 60)); const seconds = Math.floor((distance % (60 * 1000)) / 1000); if (distance < 0) { // Stop Timer clearInterval(interval.current); } else { // Update Timer setTimerMinutes(minutes); setTimerSeconds(seconds); } }); }; useEffect(() => { startTimer(); }); return ( <div> <div className='divBut'> <NavBar></NavBar>, <NavBar type={'drugi'}></NavBar>,<NavBar></NavBar> </div> <GlowBox> <div className='App'> <LeftSide timerMinutes={timerMinutes} timerSeconds={timerSeconds} /> </div> </GlowBox> </div> ); } export default App;Creo que esto se debe a que su componente LeftSide está dentro de GlowBox, lo que significa que solo puede acceder a los accesorios de GlowBox, no al estado. Está anidado.
Para la barra de navegación, puede funcionar si intenta acceder al estado, porque no están anidados en un componente React. Intente eliminar el componente LeftSide de Glowbox o abra el componente GlowBox y coloque LeftSide dentro de él (dentro de su archivo)