javascript - 为什么使用FileReader读取文件内容时setState不起作用？

Question

我正在创建一个文件输入来选择可以预先可视化的多个图像。

为了处理多个图像，我将它们放入组件状态的数组中，并映射预可视化图像。

但是当我从输入中选择图像并使用 this.setState({imgArray: newArray}) 设置状态时, this.state.array.map(image=><img src={image}/>)不重新渲染选定的图像。

代码:

export default class posts extends Component {
  state = {
    fotos: ["/iconos/img.svg"] // If there are not img selected, it renders one image icon
  }

  onUploadVarious = e => {
    let newArray = []
    Object.values(e.target.files).map(file => {
      let nuevo = new FileReader()
      nuevo.onload = event=> newArray.push(event.target.result)
      nuevo.readAsDataURL(file)}
    )
    this.setState({fotos: newArray}) // the state is set correctly
  }
}

渲染:

<div className=" border rounded" style={{"height":"30%", "overflow":"auto"}}>
    {this.state.fotos.map(foto =>
      <img src={foto||"/iconos/img.svg"}
        id="arch-preview"/>)} // it doesn't re-render when fotos state is changed
</div>

// input
<div className="mt-auto">
    <input multiple="multiple" type="file" 
    onChange={this.onUploadVarious} 
    className="form-control-file" name="file" />
</div>

Answer 1

FileReader 异步读取文件内容。

由于这种异步性质，在 newArray 中设置数据 url 之前会设置状态，即 this.setState({fotos: newArray})即newArray.push(event.target.result)。

这就是您选择的文件未显示的原因。

要修复此问题，您可以使用 create Promise ，它会在每个文件的 load 事件后得到解决。并使用 Promise.all ，它将在每个 Promise 解析后解析，然后使用 setState:

readAsDataURL = (file) => {
  return new Promise((resolve, reject) => {
    const fr = new FileReader()
    fr.onerror = reject
    fr.onload = function () {
      resolve(fr.result)
    }
    fr.readAsDataURL(file)
  })
}

onUploadVarious = (e) => {
  Promise.all(Array.from(e.target.files).map(this.readAsDataURL))
    .then((urls) => {
      this.setState({ fotos: urls })
    })
    .catch((error) => {
      console.error(error)
    })
}

This有一些Promise 及其执行命令的好例子。另请检查this关于将 FileReader 与 Promise 一起使用。