3 errores de reacción de principiantes que pueden arruinar tu aplicación

Como desarrollador de React, seguramente cometerá algunos errores al codificar con el marco. Algunos de estos errores son bastante comunes. Y debido a su naturaleza sutil, puede resultarle difícil identificar estos problemas para depurar su aplicación.

Descubra tres de los errores de React más comunes que cometen los desarrolladores. Puede cometer estos errores como desarrollador de React principiante, intermedio o avanzado. Pero aprender sobre ellos y sus implicaciones te ayudará a evitarlos y resolverlos.

1. Uso del tipo incorrecto de función de devolución de llamada

El manejo de eventos es una práctica común en React, a través de La poderosa funcionalidad de escucha de eventos de JavaScript. Tal vez desee cambiar el color de un botón cuando se desplaza sobre él. Tal vez desee enviar datos de formulario al servidor al momento del envío. En ambos escenarios, debe pasar una función de devolución de llamada al evento para realizar la reacción deseada. Aquí es donde algunos desarrolladores de React cometen errores.

Considere el siguiente componente, por ejemplo:

exportarpor defectofunciónaplicación() {
funciónmanejarEnviar(mi) {
 e.preventDefault()
consola.registro("¡Formulario enviado!")
 }
funciónimprimir(número) {
consola.registro("Imprimir", número)
 }
funcióndoblador(número) {
devolver() => {
consola.registro("Doble", número * 2)
 }
 }
devolver (
 <>
 {/* El código irá aquí */}
 </>
 )
}

Aquí tienes tres funciones separadas. Mientras que las dos primeras funciones no devuelven nada, la tercera devuelve otra función. Debe tener eso en cuenta porque será clave para comprender lo que aprenderá a continuación.

Ahora, pasando a JSX, comencemos con la primera y más común forma de pasar una función como controlador de eventos:

<formaenEnviar={manejarEnviar}>
<aportetipo="texto"nombre="texto"valor por defecto="inicial"/>
<botón>Entregarbotón>
forma>

Este ejemplo pasa el nombre de la función al evento a través de onSubmit prop para que React llame a handleSubmit cuando envíes el formulario. Dentro de handleSubmit, puede acceder al objeto de evento, que le da acceso a propiedades como evento.objetivo.valor y métodos como evento.preventDefault().

La segunda forma de pasar una función de controlador de eventos es llamarla dentro de la función de devolución de llamada. Esencialmente, estás pasando onClick una función que llama a print() por ti:

{[1, 5, 7].mapa((número) => {
devolver (
 imprimir (número)}>
 Imprimir {número}
 </button>
 )
})}

Este método es útil en escenarios en los que desea pasar datos locales a la función. El ejemplo anterior pasa cada número a la función print(). Si usó el primer método, entonces no podría pasar argumentos a la función.

El tercer método es donde muchos desarrolladores cometen muchos errores. Recuerda que la función duplicadora devuelve otra función:

funcióndoblador(número) {
devolver() => {
consola.registro("Doble", número * 2)
 }
}

Ahora, si lo usaste en el JSX así:

{[1, 5, 7].mapa((número) => {
devolver (
 duplicador (número)}>
 Doble {número}
 </button>
 )
})}

En este caso, la función de la que regresa doble() es lo que se asigna a onClick. Es esencialmente lo mismo que copiar la función devuelta y pegarla en línea en onClick. Este último método no tiene ningún caso de uso. La mayoría de las veces, es mejor agregar la función como una variable (primer método) o llamar a la función dentro de una devolución de llamada (segundo método).

Las tres técnicas son válidas porque, en todos los casos, está pasando una función al evento. En React, debe asegurarse de pasar una función a una propiedad de evento. Podría ser una variable, una función codificada (en línea) o un objeto/función que devuelve otra función.

2. Salida de cero durante un cheque falso

Cuando estas renderizar condicionalmente un elemento en React, puede usar una instrucción if...else o la técnica de cortocircuito. El cortocircuito implica el uso del signo doble (&&). Si la condición anterior al ampersand se evalúa como verdadera, entonces el navegador ejecuta el código que sigue al ampersand. Si no, entonces el navegador no ejecuta ningún código.

El cortocircuito es la mejor técnica gracias a su sintaxis concisa, pero tiene un efecto secundario que muchos desarrolladores no notan. Este error ocurre por no entender exactamente cómo funciona JSX con valores falsos.

Considere el siguiente código:

exportarpor defectofunciónaplicación() {
constante matriz = [1, 2, 3, 4]
devolver (


 {matriz.longitud && (


Formación artículos:</span> {matriz.join(", ")}
 </div>
 )}
 </div>
 )
}

Siempre que la matriz tenga algo dentro, React imprimirá cada elemento en la página. Esto se debe a la matriz.longitud check está devolviendo un valor veraz. Pero, ¿qué sucede si su matriz está vacía? Primero, los elementos resultantes se mostrarán en la página, que es lo que esperaría. Sin embargo, encontrarías un extraño cero apareciendo en tu pantalla.

La razón de eso es que matriz.longitud devuelve cero. El valor cero es falso en JavaScript. Y el problema es que JSX muestra cero en la pantalla. Otros valores falsos como nulo, falso e indefinido no se representan. Esto puede conducir a una mala experiencia de usuario porque siempre aparecerá cero en la página. A veces, el cero puede ser tan pequeño que ni siquiera lo notas.

La solución es asegurarse de devolver solo nulo, indefinido o falso. Para hacer esto, marque explícitamente cero en la condición en lugar de confiar en un valor falso:

exportarpor defectofunciónaplicación() {
constante matriz = [1, 2, 3, 4]
devolver (


 {matriz.longitud !== 0 && (


Formación artículos:</span> {matriz.join(", ")}
 </div>
 )}
 </div>
 )
}

Ahora el valor cero no se mostrará en la pantalla incluso cuando la matriz esté vacía.

3. No actualizar el estado correctamente

Cuando actualiza el estado en un componente de React, debe hacerlo correctamente para evitar efectos secundarios no deseados. Los peores errores son los que no arrojan ningún error para ti. Hacen que sea difícil depurar y descubrir cuál es el problema. Las actualizaciones de estado deficiente tienden a tener ese efecto.

Este error se debe a que no comprende cómo actualizar el estado cuando está utilizando el estado existente. Considere el siguiente código, por ejemplo:

exportarpor defectofunciónaplicación() {
constante [array, setArray] = useState([1, 2, 3])
funciónañadirNúmeroParaIniciar() {
 array.unshift (número)
 setArray (matriz)
 }
funciónañadirNúmeroAlFinal() {
 array.unshift (número)
 setArray (matriz)
 }
devolver (
 <>
 {matriz.unirse(", ")}


 al hacer clic = {() => {
 añadirNúmeroAlInicio(0)
 agregarNúmeroAlFinal(0)
consola.log (matriz)
 }}
 >
 Agregar 0 para empezar/finalizar
 </button>
 </>
 )
}

Si tuviera que ejecutar el código anterior, notaría que ambas funciones agregaron cero al inicio y al final de la matriz. Pero no ha agregado los ceros a la matriz impresa en la página. Puede seguir haciendo clic en el botón, pero la interfaz de usuario permanece igual.

Esto se debe a que, en ambas funciones, está mutando su estado con array.push(). React advierte explícitamente que el estado debe ser inmutable en React, lo que significa que no puede cambiarlo en absoluto. React usa valores referenciales con su estado.

La solución es acceder al estado actual (currentArray), hacer una copia de ese estado y actualizar esa copia:

funciónañadirNúmeroParaIniciar(número) {
 establecerArray((matriz actual) => {
devolver [número,... matriz actual]
 })
}
funciónañadirNúmeroParaIniciar(número) {
 establecerArray((matriz actual) => {
devolver [...matrizactual, número]
 })
}

Este es el método correcto para actualizar el estado en React. Ahora, cuando hace clic en el botón, agrega cero al inicio y al final de la matriz. Pero lo más importante, las actualizaciones se reflejarán en la página de inmediato.

Otros conceptos importantes de JavaScript para React

Este artículo cubrió algunos de los errores comunes que se deben evitar al codificar en React. Los tres errores cubiertos aquí se derivan de la falta de comprensión de JavaScript correctamente. Debido a que React es un marco de JavaScript, necesitará una sólida comprensión de JavaScript para trabajar con React. Esto significa aprender los conceptos importantes que más se relacionan con el desarrollo de React.