第二次触发onChange，自定义组件不更新

Question

问题：当props.files 被控制台记录时（查看下面的代码以了解它的记录位置），它第一次工作。但是，当我选择一组新文件时，它永远不会再次记录任何内容，除非我重新加载页面并重新开始。我在这里做错了什么？

我的代码信息：

我正在为以下自定义组件（即 Form.Group、Form.Label、Form.Control）使用React Bootstrap Form Components（滚动到“文件输入”）。为了清晰起见，代码被大大简化：

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

Answer 1

编辑：如果要在 UploadFile 组件中触发 console.log，则必须触发重新渲染。目前我没有看到你在 UploadFile 组件的渲染方法中使用props.files。也许试试这个：

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

Answer 2

React 不知道如何管理 FileList 并且在子组件中看不到这些 props 的变化。如果您将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>

澄清：

FileList 不受 react 管理，因为它的值只能由用户设置，不能以编程方式设置：https://reactjs.org/docs/uncontrolled-components.html#the-file-input-tag