Question

我有一个需要放入状态的文件对象。我之所以尝试这样做，是因为它提供了一种重新呈现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()函数。

任何想法或解决方案都值得赞赏。谢谢！

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]);

}

Answer 2

这里Files [0]是一个对象，如果您只是将状态文件类型更改为空对象并在render方法中控制状态变量（如果值会更新），则将该对象存储在数组中。这是一个例子：

this.state = {
  files: {}
};
render() {
  console.log(this.state.files)
  return (
  --- 
  );
}

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

2 个答案: