Aquí está mi código mínimo para mostrar el problema:
async function doSomeThings(caller) { console.log('Step 1 for ' + caller); await 1; console.log('Step 2 for ' + caller); } function TestAsyncComponent() { doSomeThings('React component'); return null; } doSomeThings('module'); export default TestAsyncComponent; El TestAsyncComponent simplemente se representa dentro de una página. El código que hace eso es esencialmente solo el modelo generado por create-react-app. Pero si quieres verlo, lo arrastraré.
Cuando TestAsyncComponent se importa y luego se procesa, la salida de la consola muestra lo siguiente:
Step 1 for module Step 2 for module Step 1 for React component Step 2 for React component Step 2 for React componentHay algo acerca de llamar a la función asíncrona desde la función React durante el renderizado que hace que una parte del código dentro de la función asíncrona se ejecute dos veces. Eso es totalmente inesperado para mí.
Nota: la función asíncrona no se llama dos veces. Si ese fuera el caso, entonces el "Paso 1 para el componente React" se generaría dos veces. La ejecución se produce dos veces para el código después de la instrucción "esperar 1" dentro de la función asíncrona.
¿Cómo evito este comportamiento llamado dos veces de React? Además, estoy muy interesado en la explicación de por qué el código después de "esperar 1" se llama dos veces.
La premisa original del OP de que la función asíncrona no se llama dos veces es incorrecta. Se suprimió el registro de la consola para una salida de la línea console.log('Step 1 for ' + caller) . Pero establecer un punto de interrupción en el depurador probó que la ejecución llegó a esta línea dos veces en lugar de una.
El problema se puede solucionar con useEffect() así:
function TestAsyncComponent() { useEffect(() => { doSomeThings('React component'); return null; }, []); } Esto funciona porque la llamada a doSomeThings() solo se llamará una vez.
Respuesta automática para tener una respuesta registrada para la pregunta. Gracias a los que ayudaron arriba en los comentarios.