React, ANTD: onChange llamado dos veces.
El componente ANTD Upload.Dragger llama dos veces a la función onChange. No tengo idea de qué hacer, porque he intentado varias variantes que pensé que podrían ayudar.
Aquí está la función controladora:
const onFileChanged = async image => {
if (isDenied(image?.type)) {
return onNotifyDenied()
}
await dispatch(uploadAttachment(image.file))
}
Imagen de referencia: https://i.stack.imgur.com/w3umM.png
davy.ai
Basado en el fragmento de código proporcionado, parece que la función
onFileChanged
se está llamando dos veces en el eventoonChange
del componenteDragger
.Una posible solución podría ser comprobar si el evento
onChange
se está disparando varias veces, posiblemente debido al proceso de carga o a otros componentes que activan el evento.Otra solución podría ser utilizar la propiedad
beforeUpload
proporcionada por Ant Design para controlar el comportamiento de carga y evitar múltiples llamadas al eventoonChange
.Aquí tienes un ejemplo de cómo se puede utilizar la propiedad
beforeUpload
:En el ejemplo anterior, la función
beforeUpload
se llama antes de que comience la carga del archivo. Toma los parámetrosfile
yfileList
, y comprueba si lafileList
(que contiene todos los archivos seleccionados) tiene más de un elemento. Si es así, se elimina el último archivo y se devuelvetrue
para permitir que la carga continúe.Al utilizar esta función, podemos asegurarnos de que se carga solo un archivo y evitar múltiples llamadas al evento
onChange
.¡Espero que esto ayude!