2016-03-03 68 views
2

我一直在想辦法使用通過flowrouters路由參數給reactjs給出的數據。React/Meteor/Flowrouter:傳遞數據

我想要實現的是,當用戶創建一個特定屬性的場並將該數據插入到mongo集合中時,則可以在另一個視圖中更新這些值。所以我需要以某種方式讓用戶_id例如傳遞到此更新視圖。

目前,我有這樣的代碼如下:

FlowRouter.route("/serviceplan/general/basic/:postId",{ 

name: "BasicInformation", 
action(params){ 
    renderTestLayout(<BasicInfo params={params}/>); 
}}); 

視圖代碼:

BasicInfo = React.createClass({ 

propTypes: { 

    params: React.PropTypes.object.isRequired, 
}, 

mixins: [ReactMeteorData], 

getMeteorData(){ 
    return{ 
     owner: Farms.findOne({farmname: this.props.params.postId}) 

    } 
}, 

updateFarm(){ 
    console.log("updated!"); 
}, 

render(){ 

    console.log(this.data.owner); 
    console.log(this.data.owner.address); 

    return( 
     <div> 

      <div className="col-sm-4"> 
      <h1>Basic information</h1> 
      <form onSubmit={this.updateFarm}> 
       <label>Name:</label> 
        <input type="text" ref="fname" className="form-control" defaultValue=""/><br></br> 

       <label>Address:</label> 
       <input type="text" ref="address" className="form-control" defaultValue=""/><br></br> 

       <label>Postalcode:</label> 
       <input type="text" ref="postalcode" className="form-control" defaultValue=""/><br></br> 

       <label>Area:</label> 
       <input type="text" ref="municipality" className="form-control"defaultValue=""/><br></br> 

       <input type="submit" value="Update" className="btn btn-default" onClick={this.updateFarm}/> 
      </form> 
      </div> 
     </div> 
    ); 
} 

這裏的問題是,當我重定向到這個BasicInfo組件查看數據正常工作與道具。但是當我嘗試提交更改時,頁面重新加載和應用程序崩潰。而且可能是因爲它沒有被賦予這個組件,所以prop屬性值爲null。

什麼是解決方案,所以我會從每次刷新時從url獲得postId值?

回答

0

我發現應用程序崩潰的原因和解決方案。

我試圖訪問不存在的數據。

if(this.data.owner){ 

     farmname = this.data.owner.farmname; 
     address = this.data.owner.address; 
     postalcode = this.data.owner.postalcode; 
     municipality = this.data.owner.municipality; 
     region = this.data.owner.municipality; 

工作方案是檢查mongo數據對象在訪問它之前是否不爲空。