Estoy tratando de agregar archivos al estado del archivo anterior al arrastrar y soltar imágenes en la biblioteca React-Dropzone.
const [files, setFiles] = useState([]) ... const { getRootProps, getInputProps, isFocused, isDragAccept, isDragReject, } = useDropzone({ accept: "image/*", onDrop: (acceptedFiles) => { setFiles(acceptedFiles.map((file) => Object.assign(file, { preview: URL.createObjectURL(file) }))) } })En "onDrop", mapeo los archivos aceptados y agrego la nueva matriz usando setFiles. Sin embargo, al usar esto se restablece toda la matriz y se pierden las imágenes anteriores. Quiero adjuntar las imágenes. He intentado hacer:
setFiles([...files, acceptedFiles.map((file) => Object.assign(file, { preview: URL.createObjectURL(file) }))])Pero esto no devuelve nada y no me da ninguna imagen.
Cuando se agrega a una matriz en estado React, puede ser muy conveniente usar la forma de actualización funcional de useState , que es solo una forma elegante de decir que escribirá una función de flecha como esta:
setFiles((oldArrayofFiles) => { return [...oldArrayOfFiles, newFile]; }) Esto también evita el problema que creo que está viendo, donde debido a que proporciona onDrop como una función, está cerrando los files cuando todavía es una matriz vacía. Así que en tu caso (y perdóname, no he probado esto con React-Dropzone) esto debería funcionar:
useDropzone({ accept: "image/*", onDrop: (acceptedFiles) => { setFiles((previousFiles) => { const newFiles = acceptedFiles.map((file) => Object.assign(file, { preview: URL.createObjectURL(file) })); return [...previousFiles, ...newFiles]; }); });Podría haber estropeado uno o tres corchetes... pero entiendes la idea :-)