¿Por qué mi función se llama dos veces en React?

Si te encuentras con algún detalle que te causa duda nos puedes dejar un comentario y haremos todo lo necesario de ayudarte tan rápido como podamos.

Solución:

es porque tu app componente es una envoltura en StrictMode.

  
,

Si estás usando create-react-app entonces se encuentra en index.js

Se espera que setState los actualizadores se ejecutarán dos veces en strict mode en desarrollo. Esto ayuda a garantizar que el código no dependa de que se ejecuten una sola vez (que no sería el caso si se cancelara un procesamiento asíncrono y luego se reiniciara). Si tu setState los actualizadores son funciones puras (como deberían ser), entonces esto no debería afectar la lógica de su aplicación.

https://github.com/facebook/react/issues/12856#issuecomment-390206425

El problema está relacionado con html, en lugar de estar relacionado con React. De forma predeterminada, hacer clic en una etiqueta también activará el evento onClick del elemento de entrada con el que está asociado. En su caso, el evento onClick se adjunta tanto a la etiqueta como a la entrada. Entonces, al hacer clic en la etiqueta, el evento se activa dos veces: una para la etiqueta y otra para la entrada asociada a ella.

Editar: adjuntar el oyente onClick a la entrada es una posible solución al problema

Evite llamar dos veces usando e.preventDefault().

changeShipping(e)
   e.preventDefault();
   console.log('clicked');

Recuerda difundir este artículo si lograste el éxito.

---

---

Utiliza Nuestro Buscador