0
203
VistasError de reacción en la consola: se superó la profundidad máxima de actualización cuando la longitud de entrada es superior a 5
Tengo un componente de entrada que acepta entradas de hasta 5 caracteres. Cuando la longitud de entrada es superior a 5, muestra un mensaje Limit Exceeds (only upto 5 characters accepted) .
Ejemplo de código de componente:
import { useEffect, useState } from "react"; export function ConditionalInput() { const [inputInfo, setInputInfo] = useState({ value: "", lengthCount: 0 }); const [warningMessageVisible, setWarningMessageVisible] = useState(false); useEffect(() => { if (inputInfo.value.length > 5) { setInputInfo((s) => ({ ...s, lengthCount: 0 })); } }, [inputInfo, warningMessageVisible]); const onChange = ({ target }) => { setInputInfo((s) => ({ ...s, value: target.value })); if (target.value.length > 5) { setWarningMessageVisible(true); } }; return ( <div> <input type="text" value={inputInfo.value} onChange={onChange} /> <div>Number of secrets: {inputInfo.lengthCount}</div> {warningMessageVisible && ( <h3>Limit Exceeds (only upto 5 characters accepted)</h3> )} </div> ); }En la interfaz de usuario, todo se ve bien, pero en la consola puedo ver un mensaje de error que se imprime en un bucle infinito que indica: Se excedió la profundidad máxima de actualización
Nota : el código anterior no es el código real que estoy usando, sino una simulación. Tiene el mismo error y funciona.
¿Cómo puedo corregir este error que aparece en la consola? se agradece cualquier consejo o respuesta
3 Respuestas
Responde la pregunta0
Es debido a la matriz de dependencias que ha agregado setInputInfo Su useEffect se activará cada vez que haya un cambio en inputInfo . Y dentro de useEffect estás modificando inputInfo . Básicamente, está creando un bucle infinito que seguirá representando la vista.
Para solucionarlo, puede eliminar inputInfo de la matriz de dependencias de su useEffect.
0
Este problema ocurre a partir de este useEffect
useEffect(() => { if (inputInfo.value.length > 5) { setInputInfo((s) => ({ ...s, lengthCount: 0 })); } }, [inputInfo, warningMessageVisible]); Este useEffect siempre se ejecuta cuando cambia inputInfo . Por lo tanto, debe eliminar inputInfo en este useEffect de esta manera:
useEffect(() => { if (inputInfo.value.length > 5) { setInputInfo((s) => ({ ...s, lengthCount: 0 })); } }, [warningMessageVisible]);0
Necesitas hacer los siguientes cambios en tu código:
- eliminar inputInfo de las dependencias useEffect
- en lugar de usar
infoInput.lengthCountuseinfoInput.value.lengthpara mostrar el conteo de longitud.
A continuación se muestra el código de trabajo
import { useEffect, useState } from "react"; export function ConditionalInput() { const [inputInfo, setInputInfo] = useState({ value: "", lengthCount: 0 }); const [warningMessageVisible, setWarningMessageVisible] = useState(false); useEffect(() => { if (inputInfo.value.length > 5) { setInputInfo((s) => ({ ...s, lengthCount: 0 })); } }, [warningMessageVisible]); const onChange = ({ target }) => { setInputInfo((s) => ({ ...s, value: target.value })); if (target.value.length > 5) { setWarningMessageVisible(true); } }; return ( <div> <input type="text" value={inputInfo.value} onChange={onChange} /> <div>Number of secrets: {inputInfo.value.length}</div> {warningMessageVisible && ( <h3>Limit Exceeds (only upto 5 characters accepted)</h3> )} </div> ); }