如何使用文件对象设置状态

Question

我有一个需要放入状态的文件对象。我尝试这样做的原因是它被提供作为重新渲染 DOM 的可能解决方案，以便清除 FileReader() 中的值。这是当前线程源自的链接

节点“加密”SHA256 散列模型行为不正常

我将在此处放置一个精简的 React 组件，以便您可以看到发生了什么。

import React, { Component } from "react";

class SearchPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      files: []
    };
  }

  onChange(e) {
    let files = e.target.files;
    this.setState({ files: files[0] });
    console.log(files[0]);
    console.log(this.state.files)
  }

  render() {
    return (
        <div onSubmit={this.onFormSubmit}>
          <input type="file" name="file" onChange={e => this.onChange(e)} />
        </div>
    );
  }
}

export default SearchPage;

console.log(files[0]} 给出了这样的东西：

File(1) {name: "1.txt", lastModified: 1549429792266, lastModifiedDate: Tue Feb 05 2019 22:09:52 GMT-0700 (Mountain Standard Time), webkitRelativePath: "", size: 1, …}
lastModified: 1549429792266
lastModifiedDate: Tue Feb 05 2019 22:09:52 GMT-0700 (Mountain Standard Time) {}
name: "1.txt"
size: 1
type: "text/plain"
webkitRelativePath: ""

如果console.log(this.state.files)我得到[].

我已经设置了初始状态""，并null无济于事。我最终想将状态用于FileReader()函数。

任何想法或解决方案表示赞赏。谢谢！

Answer 1

setState是一个异步函数，您需要setState在状态更新后执行的回调函数中控制台日志。

onChange(e) {
  let files = e.target.files;
  this.setState({ files: files[0] }, () => { console.log(this.state.files) });
  console.log(files[0]);

}