reactjs - Material-UI 线性进度条不起作用

Question

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

下面显示的是我创建的组件，它呈现文件上传实用程序和 LinearProgress 栏。

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

问题是进度条没有前进。我肯定错过了一些非常简单的东西。

非常感谢您的任何帮助，并提前感谢您。

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

Answer 1

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

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”将失败。

但是，你永远不应该直接改变你的状态。始终使用 setState()。因此，删除所有这样的调用:

this.state.completed = ???;

总是这样做:

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

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

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() 之后不会重新渲染组件)