Tengo un componente TextField personalizado que puede mostrarse cuando ocurre un error, por ejemplo, cuando se intenta enviar un formulario con el campo de texto vacío. En ese caso, el campo se muestra como 'rojo' con un texto de error apropiado.

El problema al que me enfrento es que, actualmente, cuando trato de manejar esa lógica desde un Componente de formulario, digamos un inicio de sesión (estoy manejando mi estado requerido con useState(state, setState)) el TextField es 'rojo' en el primer render, porque está vacío. Esto solo debería suceder cuando un usuario escribió algo y lo eliminó nuevamente, pero no directamente en el primer renderizado, ya que el TextField está vacío de todos modos.

Anteriormente, podría haberlo resuelto con el gancho del ciclo de vida componentDidUpdate(). Por lo tanto, ¿debería usarse algo como useEffect(...)? No sé cómo hacerlo. ¿Algunas ideas?

0
PrestigeDev 5 feb. 2019 a las 18:14

2 respuestas

La mejor respuesta

Puede usar el gancho useEffect para activar el cambio desde el componente principal, useEffect necesita una función de devolución de llamada y una matriz (llamadas dependencias), cuando los valores dentro de esta matriz cambian, useEffect realiza la llamada de devolución de llamada.

Prueba esto en tu componente

const [value, setValue] = useState(""); useEffect(() => setValue(initialValue), [initialValue]);

initialValue es el valor de su componente (pasando por accesorios al componente hijo, por ejemplo, su campo de entrada)

0
tolotra 30 nov. 2019 a las 19:29

Esta debería ser la solución conceptual que estaba buscando para mi problema.

Aquí una pequeña imagen que muestra el concepto. Para obtener más información, lea el enlace a continuación.

enter image description here

https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects

0
PrestigeDev 5 feb. 2019 a las 15:46