如何在 React 中显示进度值

Question

this image after set state progress我尝试在上传图片时使用进度条显示百分比，但不起作用（它只在 console.log() 上显示）

fileuploadHandler = () => {
const storageRef = fire.storage().ref();
this.state.file.forEach((file) => {
  this.setState({ uploading: true })
  storageRef
    .child(`images/${file.name}`)
    .put(file).then((snapshot) => {
      var uploadTask = storageRef.child(`images/${file.name}`).put(file);
    uploadTask.on('state_changed', function(snapshot){
      var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
      this.setState({progress});
      console.log('Upload is ' + progress + '% done');
      switch (snapshot.state) {
        case fire.storage.TaskState.PAUSED: // or 'paused'
          console.log('Upload is paused');
          break;
        case fire.storage.TaskState.RUNNING: // or 'running'
          console.log('Upload is running');
          break;
      }

和

<div className='container'>
      {this.state.uploading
        ? <div>
          <div className='load-bar' />
          <progress   value = {this.state.progress} min = "0" max="100" id="uploader">0%</progress>
          <br/><br/>
          <span>Uploading: {this.state.uploader}%</span>
          <h3> {this.state.progress} </h3>


        </div>

Answer 1

您错过了 setState statement.You 每次更新都需要更新 state of progress。

  var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    this.setState({progress});//add this one

由于 progress 的状态值没有更新，它不会在 UI 上显示。

编辑：

将进度的初始值设置为 0

this.state = {
    progress : 0
  }

编辑 2：

uploadTask.on('state_changed',(snapshot)=>{

如何在 React 中显示进度值

how to show progress value in React

javascript

reactjs

progress-bar

progress