如何使用文件对象设置状态 [英] how to setState with a file object

问题描述

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

Node 'crypto' SHA256 hashing model behaving erratically

我将在此处放置一个浓缩的反应组件，以便您可以看到发生了什么。

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()函数。

欢迎任何想法或解决方案。谢谢！

推荐答案

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

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

}

这篇关于如何使用文件对象设置状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！