如何更改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"}); 
     } 
    }) 
    } 
    // ... 
} 
// ...