Tengo una condición si no, sé cuál es verdadera y debe funcionar cuando la página se está procesando, pero la falsa funciona por muy poco tiempo. Cómo puedo detener esto. Siempre veo "La subasta ha terminado" y luego la vista cambia, pero ¿no debería ver esto al principio? ¿Cómo funciona la condición incorrecta y cómo aparece en la pantalla?
const [days, hours, minutes, seconds] = useCountdown(endDate); const isFinished = (days + hours + minutes + seconds <=0); let showTime = ""; let html = ""; if (pendingApiCall) { html = <Spinner /> } else { if (!isFinished) { showTime = `${days} days ${hours} hours ${minutes} minutes ${seconds} seconds`; html = (<> <span className="text-danger">{showTime}</span> {isLoggedIn && (!isOwner && (<div className="action my-2"> <Input label='Enter your bid' name='bid' id='price' type="text" onChange={onChangePrice} error={bidError || samePriceError } /> <ButtonWithProgress className="add-to-cart btn btn-default" pendingApiCall={bidPendingApiCall || pendingApiCall} text='bid on product' onClick={() => setModalVisible(true)} disabled={bidError || (price == null)} /></div>)) } {!isLoggedIn && <Link to="/login" className="action my-2">Login to bid</Link>} </> ) } else { html = (<span className="text-danger">"Auction is over"</span>); } }El problema es isFinished , su valor nunca cambia después de la primera asignación. Es posible iniciar esto con true .
Puede crear esto como un estado y modificarlo en un useEffect cuyas dependencias son solo days, hours, minutes . Evitar escribir seconds para no renderizar cada segundo, pero no es totalmente necesario. Cuando el minuto es inferior a 1 days, hours es igual a 0 , un setTimeout para llamar a una función que también está isFinished en 59 s, u otra solución creativa.
const [isFinished, setIsFInished] = useState(true) useEffect( () =>{ if(days === 0 && hours === 0 && minutes > 1) // setTimeOut to call a function else return; },[days, hours, minutes]) // You can add the rest of themesa es mi idea Pero, tal vez pueda existir algún otro enfoque mejor.