useState() no puede establecer el objeto de archivo. Agregué comentarios en el código para explicar lo que está sucediendo:
const [file, setFile] = useState<File>() const onChange = async ( imageList: ImageListType, addUpdateIndex: number[] | undefined ) => { if (imageList[0].file) { console.log("first image: ", imageList[0].file) // this line print out the right file object, but setFile NOT working below line setFile(imageList[0].file) } console.log("file: ", file) // this line will print undefined }Cuando llama a setFile(imageList[0].file) , es necesario volver a procesar para actualizar file . Actualizar un estado es una tarea asíncrona, por eso te estás quedando undifined . Para ver el valor actualizado de file , puede agregar console.log justo después de llamar a useState , de esta manera:
const [file, setFile] = useState<File>() console.log(file); // you will get undifined first, and after calling onChange the updated value O bien, podría usar un useEffect , así:
useEffect(()=>{ if (file){ console.log(file) } },[file])Creo que useState puede configurar cualquier tipo de objeto, sin embargo, el problema aquí es que está configurando el archivo y luego lo está registrando, lo que funciona en un 90%, ¿por qué? eso es porque ReactJs useState establece su estado de forma asíncrona
entonces, para verificar el objeto del archivo, agregue esto a su código
useEffect(()=>{ console.log(file) },[file])