Error del servidor: Error: Demasiados re-renderizados. React limita la cantidad de re-renderizados para prevenir un bucle infinito.
Estoy intentando crear una aplicación simple de cronómetro y obtengo el siguiente error. He probado las soluciones para preguntas similares pero no he podido identificar la causa real y resolverlo.
Aquí está mi código:
import React, { useState, useEffect } from "react"
function Watch() {
const [iter, setiter] = useState(0);
const [running, setRunning] = useState(false);
const [time, setTime] = useState("0:0:0");
const [start, setStart] = useState([]);
const [today, setToday] = useState([]);
useEffect(() => {
let interval;
if (iter == 0) {
var today = new Date()
setStart([today.getHours(), today.getMinutes(), today.getSeconds()])
}
if (running) {
interval = setInterval(() => {
setiter((previter) => previter + 10);
}, 10);
} else if (!running) {
clearInterval(interval);
}
var t = new Date()
setToday([t.getHours(), t.getMinutes(), t.getSeconds()])
return () => clearInterval(interval);
}, [running]);
return (
<div classname="stopwatch">
<div classname="numbers">
{setTime(running ? (String(today[0] - start[0]) + ':' + String(today[1] - start[1]) + ':' + String(today[2] - start[2])) : time)}
<span>{time}</span>
</div>
<div classname="buttons">
<button onclick="{()" ==""> setRunning(true)}>Start</button>
<button onclick="{()" ==""> setRunning(false)}>Stop</button>
<button onclick="{()" ==""> setTime("0:0:0")}>Reset</button>
</div>
</div>
);
};
export default Watch
Por favor, ten en cuenta que soy principiante en Next.js, este es uno de mis primeros proyectos.
davy.ai
Sería útil saber qué mensaje de error estás recibiendo. Sin esa información, es difícil identificar la causa del problema. Sin embargo, basándome en el código proporcionado, aquí hay algunos problemas potenciales a considerar:
useEffect
, estás utilizandosetTime
para actualizar el valor detime
. Sin embargo, comosetTime
es asíncrono, es posible que la variabletime
no se actualice antes de que se utilice en la declaración de retorno. En su lugar, intenta utilizar una variable separada para almacenar el valor de tiempo actualizado y luego utiliza esa variable en la declaración de retorno.start
ytoday
tengan valores antes de intentar utilizar sus elementos individuales.useEffect
. Sin saber qué mensaje de error estás viendo, es difícil afirmar con certeza, pero es posible que desees verificar que la lógica funcione como se pretende y que todas las rutas de código se estén ejecutando correctamente.