Pregunta: Cuando props.files se registra en la consola (mire el código a continuación para ver dónde se registra), funciona la primera vez. Pero, cuando selecciono un nuevo conjunto de archivos, la consola nunca vuelve a registrar nada, a menos que vuelva a cargar la página y comience de nuevo. ¿Qué estoy haciendo mal aquí?
Información sobre mi código:
Estoy usando React Bootstrap Form Components (desplácese hasta "File Input") para el siguiente componente personalizado (es decir, Form.Group, Form.Label, Form.Control). El código está muy simplificado para mayor claridad:
const UploadFile = (props) => { // stuff here console.log(props.files); const filesFunction = (filesInput) { // do stuff with filesInput } return { <Form.Group controlId="formFileMultiple" className="mb-3"> <Form.Label> Files </Form.Label> <Form.Control type="file" multiple onChange={props.handleFilesChange} onChange={filesFunction(files)} name="files" key="files" /> </Form.Group> }En el padre, tengo una instancia del componente UploadFile personalizado, como tal:
const [listOfFiles, setListOfFiles] = useState([]); const handleFilesChange = (e) { setListOfFiles(e.target.files); } <UploadFile handleFilesChange = { e => handleFilesChange(e) } files = {listOfFiles} />EDITAR : si desea que console.log se active en el componente UploadFile, debe activar una nueva representación. Actualmente no lo veo usando props.files dentro del método de procesamiento del componente UploadFile. Tal vez intente esto:
const UploadFile = (props) => { // stuff here console.log(props.files); const randomClassName = `random-class-name-${props.files.length}`; return { <Form.Group controlId="formFileMultiple" className="mb-3"> <Form.Label className={randomClassName}> Files </Form.Label> <Form.Control type="file" multiple onChange={props.handleFilesChange} name="files" key="files" /> </Form.Group> } } Pero la forma correcta de hacer esto sería usar el gancho useEffect , que se activa cada vez que la variable cambia independientemente del método de renderizado. Aquí hay un ejemplo:
import { useEffect } from "react"; const UploadFile = (props) => { useEffect(() => { // stuff here console.log(props.files); }, [props.files]); return { <Form.Group controlId="formFileMultiple" className="mb-3"> <Form.Label> Files </Form.Label> <Form.Control type="file" multiple onChange={props.handleFilesChange} name="files" key="files" /> </Form.Group> } }React no sabe cómo administrar FileList y no ve estos cambios de accesorios en el componente secundario. Si convierte FileList en array , funciona perfectamente.
const UploadFile = (props) => { // stuff here console.log(props.files); return <ReactBootstrap.Form.Group controlId="formFileMultiple" className="mb-3"> <ReactBootstrap.Form.Label> Files </ReactBootstrap.Form.Label> <ReactBootstrap.Form.Control type="file" multiple onChange={props.handleFilesChange} name="files" key="files" /> </ReactBootstrap.Form.Group> } function App() { const [listOfFiles, setListOfFiles] = React.useState([]); const handleFilesChange = (e) => { setListOfFiles(Array.from(e.target.files)); } return <UploadFile handleFilesChange = { e => handleFilesChange(e) } files = {listOfFiles} /> } ReactDOM.render( <App />, document.getElementById('root') ) <script src="https://unpkg.com/react/umd/react.production.min.js" crossorigin></script> <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js" crossorigin></script> <script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin></script> <div id="root"></div>Aclaración:
FileList no está administrado por reaccionar, porque su valor solo puede ser establecido por un usuario y no mediante programación: https://reactjs.org/docs/uncontrol-components.html#the-file-input-tag