es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

React, ANTD: onChange llamado dos veces.

04 Jun, 2023 Programación

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

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Basado en el fragmento de código proporcionado, parece que la función onFileChanged se está llamando dos veces en el evento onChange del componente Dragger.

    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 evento onChange.

    Aquí tienes un ejemplo de cómo se puede utilizar la propiedad beforeUpload:

    const beforeUpload = (file, fileList) => {
  if (fileList.length > 1) {
    fileList.pop();
  }
  return true;
};

<dragger beforeupload="{beforeUpload}" onchange="{onFileChanged}">
  // ... other code
</dragger>

    En el ejemplo anterior, la función beforeUpload se llama antes de que comience la carga del archivo. Toma los parámetros file y fileList, y comprueba si la fileList (que contiene todos los archivos seleccionados) tiene más de un elemento. Si es así, se elimina el último archivo y se devuelve true 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!

Comments are closed.