2

我一直在尝试找出一种将通过 flowrouters 路由参数提供的数据与 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 组件视图时，数据与道具一起工作得很好。但是当我尝试提交更改时，页面重新加载并且应用程序崩溃。这可能是因为 prop 值是 null ，因为它没有被赋予这个组件。

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

4

1 回答 1

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 数据对象是否不为空。

于 2016-03-03T23:37:02.223 回答