Question

我一直试图找出一种方法，通过flowrous路由参数和reactjs使用数据。

我正在尝试实现的是当用户创建具有某些属性的服务器场并将该数据插入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组件视图时，数据可以正常使用props。但是当我尝试提交更改时，页面会重新加载并且应用程序崩溃。它可能是因为prop值为null，因为它没有被赋予这个组件。

什么是解决方案，所以我会在每次刷新时从网址获取postId值？

Answer 1

我找到了应用崩溃和解决方案的原因。

我试图访问不存在的数据。

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数据对象之前检查它是否为空。

React / Meteor / Flowrouter：传递数据

1 个答案: