Material-UI LinearProgress栏不起作用

问题描述

我有一个简单的文件上传实用程序，正在使用 react-dropzone ，与此相结合，我想使用material-ui LinearProgress栏来显示进度.

I have a simple file upload utility, for which I am using react-dropzone, and in conjunction to that I wanted to use material-ui LinearProgress bar to show the progress.

下面显示的是我创建的组件，该组件呈现了文件上传实用程序以及LinearProgress栏.

Shown below is the component I created which renders the file upload utility along with the LinearProgress bar.

我正在使用 superagent 库使用多部分表单数据将后端实际上传到后端.超级代理的请求允许使用回调或事件处理程序来上载进度.在我的代码中，progress事件处理程序已成功调用，并由console.log语句证明.在每次进度调用中，我都会更新LinearProgress栏所使用的 this.state.completed 属性.

I am using superagent library for the actual upload of the back to the backend using multipart formdata. The superagent's request allows a callback or an event handler for upload progress. In my code, the progress event handler gets successfully called and is proved by the console.log statements. On each progress call, I update the this.state.completed attribute which is used by the LinearProgress bar.

问题是进度条无法向前移动.我肯定缺少一些非常简单的东西.

The problem is the progress bar does not move forward. I am definitely missing something very simple.

非常感谢您的帮助.

import React, {Component} from 'react';
import Dropzone from 'react-dropzone';
import request from 'superagent';
import LinearProgress from 'material-ui/LinearProgress';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

export default class MultiFileUpload extends Component {
    constructor(props) {
      super(props);

      this.state = {
        completed: 0,
      };

    }

    onDrop(files) {
      console.log('Received files: ', files);
      this.state.completed = 0;
      var data = new FormData();
      var req = request.post('/nltools/v1/files/upload');
      files.forEach((file)=> {
          data.append('files[]', file, file.name);
      });

      req.on('progress', (p) => {
        console.log('Last percentage', this.state.completed);
        var percent = Math.floor(p.percent);
        if (percent >= 100) {
          this.setState({completed: 100});
          console.log('Done 100%');
        } else {
          this.setState({completed: percent});
          this.state.completed = percent;
          console.log('Percentage done: ', percent);
        }
       });

      req.send(data);
      req.end(function(err, res){
          this.state.completed = 0;
          console.log("Successfully uploaded");
      });
    }

    render() {
      var thisStyle = {
		borderWidth: 4,
		borderColor: "orange",
		borderStyle: "dashed",
		borderRadius: 4,
		margin: 30,
		padding: 30,
		height: 300,
		transition: "all 0.5s"
      };

      var progressStyle = {
        margin: 30,
        passing: 30,
      };

      return (
        <div>
          <div style={progressStyle}>
            <MuiThemeProvider>
              <LinearProgress color="orange" mode="determinate" value={this.state.completed} />
            </MuiThemeProvider>
          </div>
          <Dropzone onDrop={this.onDrop} className="dropzone-box" style={thisStyle}>
            <div>Try dropping some files here, or click to select files to upload. {this.state.completed}</div>
          </Dropzone>

        </div>
      );
    }
}

推荐答案

首先，我认为您的问题可能是这样的:

Firstly, I think your problem might be this:

onDrop={this.onDrop}

应该是

onDrop={files => this.onDrop(files)}

或...

onDrop={this.onDrop.bind(this)}

或...

constructor(props) {
  super(props);

  this.state = {
    completed: 0,
  };

  this.onDropHandler = this.onDrop.bind(this);
}

// ... then on your component:
onDrop={this.onDropHandler}

...否则，您在onDrop()内的所有"this"引用都将不正确，因此"this.state"和"this.setState"将失败.

...otherwise, all your "this" references inside of onDrop() won't be correct, so "this.state" and "this.setState" would fail.

但是，也不要直接改变状态.始终使用setState().因此，删除所有像这样的呼叫:

But also, you should never mutate your state directly. Always use setState(). So, remove all calls like this:

this.state.completed = ???;

总是这样做:

this.setState({ completed: ??? });

此外，setState是异步的.因此，如果仅在状态更新后才需要触发某些操作，则可以将回调函数作为第二个参数传递:

Also, setState is asynchronous. So, if you need to have something fired only after the state has been updated, you can pass a callback function as the 2nd argument:

this.setState({ completed: 75 }, () => { console.log('state.completed is now 75'));
// ^^ Immediately after the above call state.completed is probably not 75 yet,
// because setState() is async

最后，请特别注意您的req.end()调用.在这里，您仅是 改变状态(同样很糟糕)，并且根本不调用.setState()(因此，在req.end( ))

Lastly, pay particular attention to your req.end() call. In there, you are only mutating the state (again, that's bad) and you are not calling .setState() at all (hence, the component won't be re-rendered after req.end() )

这篇关于Material-UI LinearProgress栏不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！