Блог

Вопрос: Когда props.files консоль регистрируется (посмотрите код ниже, чтобы увидеть, где он регистрируется), он работает в первый раз. Но, когда я выбираю новый набор файлов, консоль больше никогда ничего не регистрирует, если я не перезагружу страницу и не начну все сначала. Что я здесь делаю не так?

Информация о моем коде:

Я использую компоненты формы React Bootstrap (прокрутите до «Ввод файла») для следующего пользовательского компонента (т.е. Form.Group, Form.Label, Form.Control). Код сильно упрощен для наглядности:

 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>
  }
 

В родительском у меня есть экземпляр пользовательского компонента uploadFile как такового:

 const [listOfFiles, setListOfFiles] = useState([]);

const handleFilesChange = (e) {
   setListOfFiles(e.target.files);
}

<UploadFile 
   handleFilesChange = { e => handleFilesChange(e) }
   files = {listOfFiles}
/>
 

РЕДАКТИРОВАТЬ: Если вы хотите console.log , чтобы он запускался в компоненте uploadFile, вам необходимо запустить повторный запуск. В настоящее время я не вижу, чтобы вы использовали props.files метод рендеринга внутри компонента uploadFile. Может быть, попробуйте это:

 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>
  }
}
 

Но правильным способом сделать это было бы использовать useEffect хук, который срабатывает каждый раз, когда ваша переменная изменяется независимо от метода рендеринга. Вот пример:

 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 не знает, как управлять FileList и не видит эти изменения реквизитов в дочернем компоненте. Если вы конвертируете FileList в array него, он работает отлично.

 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> 

Уточнение:

Список файлов не управляется react, поскольку его значение может быть установлено только пользователем, а не программно: https://reactjs.org/docs/uncontrolled-components.html#the-file-input-tag