Question

我有一个基本上用作上传的完全自包含文件的组件。目前，在我获得上传机制之前，我只是使用计时器来模拟进度变化。但是，当它达到100％并尝试向其父级发送消息时（通过statusChange），我有一个范围问题，其中this指的是window。我该如何解决这个问题？

实际错误：

未捕获的TypeError：_this.props.statusChange不是函数

  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState({progress: this.state.progress + 5});
      if (this.state.progress === 100) {
        clearInterval(this.timer);
        this.props.statusChange({uploadComplete: true});
      }
    }, 1000);

    debugMode && console.info('[FileUpload] Began uploading %s',
      this.props.name);
  },

编辑：问题似乎在于回调的传递。 this.props.statusChange在整个时间内确实为空。

啊，该死的！这是一个范围问题。我将在下面重点介绍：

UploadQueue = React.createClass({
  displayName: 'UploadQueue',

  propTypes: {
    fileList: React.PropTypes.any.isRequired
  },

  statusChange(status) {
    debugMode && console.info('[UploadQueue] Status change! %o', status);
  },

  render() {
    let files = [];

    // Convert to a true array
    for (let i = 0; i < this.props.fileList.length; ++i) {
      files = files.concat(this.props.fileList[i]);
    }

    return (
      <div>
        {files.map(function (file) { // should be: {files.map(file => {
          return <FileUpload key={file.name}
                             name={file.name}
                             statusChange={this.statusChange} />
        })}
      </div>
    )
  }
});

Answer 1

this范围界定问题出现在拥有FileUpload的组件中。修正了以下代码。

{files.map(file => {
  return <FileUpload key={file.name}
                     name={file.name}
                     statusChange={this.statusChange} />
})}

Answer 2

试试这个：

componentDidMount() {
  this.timer = setInterval(() => {
    this.setState({progress: this.state.progress + 5});
    if (this.state.progress === 100) {
      clearInterval(this.timer);
      this.props.statusChange({uploadComplete: true});
    }
  }.bind(this), 1000);
   ^^^^^^^^^^^^  
  debugMode && console.info('[FileUpload] Began uploading %s',
    this.props.name);
},

React - setInterval的范围问题

2 个答案: