如何在Meteor.call回调中更改React组件状态？

Question

我创建了以下jsx文件，该文件代表一个文件上传表单：

import React, { Component } from 'react';
import { Button } from 'react-bootstrap';

class File extends Component {

  constructor(){
    super()
    this.state={
      message:""
    }
  }

  uploadFile(e) {
     e.preventDefault()
     let files = document.getElementById('fileUpload');
     var file = files.files[0];

     var reader=new FileReader();

    reader.onloadend = function() {
      Meteor.call('fileStorage.uploadFile',file,file.name,file.type,function(err,response){
          console.log(response);
          // if(!err){
          //   this.setState({'message':"Upload success"});
          // }
      })
    }
    reader.readAsDataURL(file);
  }



  render() {

    return (
      <div>
        <form onSubmit={ this.uploadFile.bind(this) }>
          <label className="btn btn-primary" htmlFor="fileUpload">Click to select the file</label>
          <input id="fileUpload" className="hidden" type="file" name="file" />
          <Button type="submit">UploadFile</Button>
        </form>
        <span> {this.state.message} </span>
      </div>
    )
  }

}

export default File;

我想要做的是改变的回调类的状态Meteor.call在orget话，我想做的事：

Meteor.call('somemethod',param1,param2,param3,function(err,response){
 //call here somehow the set state
});

但是当我尝试调用它时，出现以下错误：

/app/app.js?hash=fc72488a5b54dfe0f480cc69ba373001ecf6b245:203:13
Meteor.bindEnvironment/<@http://localhost:3000/packages/meteor.js?hash=27829e936d09beae3149ecfbf3332c42ccb1596f:1105:17
_maybeInvokeCallback@http://localhost:3000/packages/ddp-client.js?hash=c9ca22092a3137a7096e8ab722ba5ab8eedb9aec:3678:7
receiveResult@http://localhost:3000/packages/ddp-client.js?hash=c9ca22092a3137a7096e8ab722ba5ab8eedb9aec:3698:5
_livedata_result@http://localhost:3000/packages/ddp-client.js?hash=c9ca22092a3137a7096e8ab722ba5ab8eedb9aec:4816:7
onMessage@http://localhost:3000/packages/ddp-client.js?hash=c9ca22092a3137a7096e8ab722ba5ab8eedb9aec:3525:201
_launchConnection/self.socket.onmessage/<@http://localhost:3000/packages/ddp-client.js?hash=c9ca22092a3137a7096e8ab722ba5ab8eedb9aec:2908:9
_.forEach@http://localhost:3000/packages/underscore.js?hash=cde485f60699ff9aced3305f70189e39c665183c:149:7
_launchConnection/self.socket.onmessage@http://localhost:3000/packages/ddp-client.js?hash=c9ca22092a3137a7096e8ab722ba5ab8eedb9aec:2907:41
sockjs-0.3.4.js/SockJS</REventTarget.prototype.dispatchEvent@http://localhost:3000/packages/ddp-client.js?hash=c9ca22092a3137a7096e8ab722ba5ab8eedb9aec:142:13
sockjs-0.3.4.js/SockJS</SockJS.prototype._dispatchMessage@http://localhost:3000/packages/ddp-client.js?hash=c9ca22092a3137a7096e8ab722ba5ab8eedb9aec:1309:9
sockjs-0.3.4.js/SockJS</SockJS.prototype._didMessage@http://localhost:3000/packages/ddp-client.js?hash=c9ca22092a3137a7096e8ab722ba5ab8eedb9aec:1375:21
sockjs-0.3.4.js/SockJS</SockJS.websocket/that.ws.onmessage@http://localhost:3000/packages/ddp-client.js?hash=c9ca22092a3137a7096e8ab722ba5ab8eedb9aec:1531:13
  meteor.js:930:11

您有任何想法怎么做吗？

Answer 1

尝试这个：

// ...
uploadFile(e) {
  const self = this;
  // ...

  reader.onloadend = function() {
    Meteor.call('fileStorage.uploadFile', file, file.name, file.type, function(err, response) {
      console.log(response);
      if(!err) {
        self.setState({'message':"Upload success"});
      }
    })
  }
  // ...
}
// ...