从文件输入迭代文件

Question

我正在尝试迭代文件输入中的所有文件，并且正在跟踪示例。我从上传控件中获取值，但无法对其进行迭代。是因为它是异步的，还是浏览器有一些保护？我可以在控制台中看到数组。

const { useState } = React;

function App() {
  const [files, setFiles] = useState([]);

  const selectedFilesChanged = e => {
    var filesArr = Array.prototype.slice.call(e.target.files);
    console.log(filesArr);
    setFiles(files);
    console.log(filesArr);
    // console.log(e.target.files);
    //alert(e);
  };

  return (
    <div className="App">
      <input type="file" multiple onChange={selectedFilesChanged} />
      <div>{files.length}</div>
      <div>
        {files.map((file, index) => (
          <div key={index}>dfsdf</div>
        ))}
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>

Answer 1

files 是一个空数组。

const [files, setFiles] = useState([]);

const selectedFilesChanged = e => {
    var filesArr = Array.prototype.slice.call(e.target.files);
    setFiles(files);
};

改用filesArr。

setFiles(filesArr);

从文件输入迭代文件

Iterating files from file input

javascript

filelist

reactjs

react-hooks

use-state