Actualmente implementé la carga de archivos usando <input> y por alguna razón cuando intento cambiar el archivo después de haberlo elegido. El sitio web se bloqueará indicando que even.target es nulo.

 <Button label="Upload S3 File"> <input type="file" onInput={(e) => handleFileUpload(e)} /> </Button>

Y aquí está mi función de controlador, para ser exactos, el error ocurre en

file: e.target.files ? e.target.files[0] : null,

 // Set up the handler const [formValues, setFormValues] = useState<RequestData>({ overrideUbi: "", marketplace: "", isTier1: "", brandName: "", brandURL: "", file: null }); const handleFormChange = (event: React.ChangeEvent<HTMLInputElement>) => { const { name, value } = event.target; // console.log(event); setFormValues((prevState) => ({ ...prevState, [name]: value, })); }; const handleFileUpload = (e: any) => { console.log("upload"); console.log(e.target) console.log(e.target.files) if (!e.target.files) return; setFormValues((prevFormValues) => ({ ...prevFormValues, file: e.target.files ? e.target.files[0] : null, })); };

No estoy seguro de por qué dice que e.target es nulo si elijo otro archivo después de haber elegido un archivo. Mi declaración if para verificar e.target == null tampoco funciona para evitar que el sitio web se bloquee. ¡Gracias!

Actualización: he adjuntado un par de capturas de pantalla que muestran el error exacto.

Un hallazgo interesante es que si uso e.persist(), puedo cambiar el archivo que quiero cargar sin activar este error. No sé exactamente por qué es eso, si alguien puede explicar qué está pasando en este ciclo de vida, realmente lo agradecería. ¡Gracias!