Por favor revise mi código primero.
const test = () => { const [files, setFiles] = useState ([]); //I think I have to edit following statement. const handleFile = (e) => { const newFiles = [] for (let i=0; i < e.target.files.length; i++) { newFiles.push(e.target.files[i]) } setFiles(newFiles) }; return ( {files.map((file, index) => ( <div> <div key={index}> <p> {file.name} </p> <Button size='small' onClick={() => {deleteSelectedFile(file.name)}}> Delete </Button> </div> </div> ))} <div> <label onChange={handleFile}> <input type='file' multiple />+ Attach File </label> </div> ) }con la declaración handleFile, puedo obtener los archivos de manera adecuada.
Sin embargo, cuando subo un archivo a la vez y luego subo un archivo de nuevo,
el archivo no se agrega. el archivo reemplaza archivo.
No hay problema cuando subo varias veces a la vez.
Por ejemplo, subo 'hola.jpg' y se muestra bien en la pantalla. Luego, subo 'adiós.jpg', se muestra bien, pero 'adiós.jpg' reemplaza a 'hola.jpg'.
Por lo tanto, lo que veo es solo 'adiós.jpg' [botón], no
'hola.jpg' [botón] 'adiós.jpg' [botón]
.
Quiero que mis archivos se apilen, sin reemplazarlos.
¡Necesito un poco de sabiduría!
En mi opinión, solo necesita distribuir los valores de estado anteriores y los archivos durante el evento de cambio.
import { useState } from "react"; export default function App() { const [files, setFiles] = useState([]); const handleChange = (e) => { // This is what you need setFiles((prev) => [...prev, ...Object.values(e.target.files)]); }; return ( <div> <label onChange={handleChange}> <input type="file" multiple /> </label> {files.map((file) => { return <p>{file.name}</p>; })} </div> ); }¿Qué tal si no crea una nueva variable para nuevos archivos, simplemente establece el estado de los archivos ya que es una matriz?
setFiles(oldFile => [...oldFile,e.target.files[i]]);Si es posible, puede colocar un enlace codepen