Tengo una función en mi aplicación de reacción que escribe en mayúscula la primera letra de una palabra o cadena que se obtiene de una API:
// Capitalize the first letter of the word/phrase const capitalize = (string) => { if (string) { return string .toLowerCase() .split(" ") .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) .join(" "); } else { return; } }; Nota: la string es el texto que se obtiene de la API. Llamo a la función así:
capitalize(userInfo.address)Funciona como se esperaba, pero al registrar los resultados en la consola, me di cuenta de que se estaba ejecutando dos o tres veces.
Caja de arena: https://codesandbox.io/s/admiring-bose-2qr01j?file=/src/App.js
¿Hay alguna manera de arreglar esto?
Esto podría ser causado por React Strict Mode . Verifique su index.js . De forma predeterminada, React envuelve su componente <App/> con <React.StrictMode> que invoca intencionalmente el método de render de sus componentes internos dos veces.
root.render( <React.StrictMode> <App /> </React.StrictMode> );Simplemente elimínelo para ejecutar funciones solo una vez.
root.render( <App /> );Parece que la función es correcta, pero quizás, cuando se ejecuta después de una llamada a una fuente de datos externa, se está realizando una llamada asíncrona (y posiblemente más de una), por lo que la función capitalize se ejecuta más de una vez.
Intente hacer que la función se ejecute independientemente de desde dónde llame.
También puede ser que estés ejecutando la función desde un bloque de código que se ejecuta más de una vez, porque la función parece ser correcta y no tiene nada de iterativo.