Javascript 这是为什么。道具。<；myprop>；子组件中未定义

这里有一个表单组件，其中有一个角色和子角色组件。roles组件工作正常，但是当我添加subroles组件时，当render函数运行时，this.props.roleList将未定义。如果我在渲染过程中不遍历子角色组件中的this.props.roleList，就让它去吧，我可以看到该道具实际上会正确地出现在那里。这怎么可能

//The form itself, this is the component which contains state.
var SupplierForm = React.createClass({
    loadSupplierTemplateFromServer: function() {
        $.ajax({
            url: this.props.getSupplierTemplateUrl,
            dataType: 'json',
            cache: true,
            success: function(data) {
                this.setState({ supplierTemplate: data });
            }.bind(this),
            error: function(xhr, status, err) {
                console.error(this.props.getSupplierTemplateUrl, status, err.toString());
            }.bind(this)
        });
    },
    handleSupplierSubmit: function(e) {
        e.preventDefault();
        $.ajax({
            url: this.props.registerSupplierUrl,
            dataType: 'json',
            type: 'POST',
            data: this.state.supplier,
            success: function() {
                //TODO: What now after supplier is registered?
            }.bind(this),
            error: function(xhr, status, err) {
                //TODO: In case of errors, guide the user onwards based on type of error
                console.error(this.props.registerSupplierUrl, status, err.toString());
            }.bind(this)
        });
    },
    getInitialState: function() {
        return {
            roleSelected: "Choose a role",
            subRoleSelected: "",
            supplierTemplate: []
        };
    },
    componentDidMount: function() {
        this.loadSupplierTemplateFromServer();
    },

    updateState: function(stateObject) {
        this.setState(stateObject);
    },

    render: function () {
        return (
            <div className="supplierForm">
                <form>
                    <h4 className="col-md-6 bifrost-formpart-header">Basic information</h4>
                    <div className="container col-md-6 bifrost-col-centered-top">
                        <BasicInformation basicInfo={this.state.supplierTemplate["Basic Information"]}
                                          updateState={this.updateState} />
                    </div>

                    <h4 className="col-md-6 bifrost-formpart-header">What is your occupation?</h4>
                    <div className="container col-md-6 bifrost-col-centered-bottom">
                        <Roles updateState={this.updateState}
                               roleList={this.state.supplierTemplate["_supplierTypes"]}
                               selectedRole={this.state.roleSelected}></Roles>
                    </div>

                    <h4 className="col-md-6 bifrost-formpart-header">What is your occupation?</h4>
                    <div className="container col-md-6 bifrost-col-centered-bottom">
                        <Subroles updateState={this.updateState}
                               roleList={this.state.supplierTemplate["_supplierTypes"]}
                               selectedRole={this.state.roleSelected}></Subroles>


                    </div>
                </form>
            </div>
      );
    }
});


//Basic information part of the form
var BasicInformation = React.createClass({
    handleBasicInfoChange: function(event) {
        var stateObject = function () {
            var returnObj = {};
            returnObj[event.target.name] = event.target.value;
            return returnObj;
        }.bind(event);

        this.props.updateState(stateObject);
    },

    render: function () {
        var fields = [];
        var keyCounter = 0;
        var keyName = "";

        for (var basickey in this.props.basicInfo) {
            if (this.props.basicInfo.hasOwnProperty(basickey)) {
                keyCounter = keyCounter + 1;
                keyName = "basic" + keyCounter;
                fields.push(
                    <input type={this.props.basicInfo[basickey]}
                           placeholder={basickey}
                           name={basickey}
                           onChange={this.handleBasicInfoChange}
                           className="form-control"
                           key={keyName}/>
                );
            }
        }

        return (
            <div className="list-group">{fields}
            </div>
        );
    }
});


var Roles = React.createClass({
    handleRoleSelection: function (event) {
        event.preventDefault();
        var stateObject = function () {
            var returnObj = {};
            returnObj["roleSelected"] = event.target.textContent;
            return returnObj;
        }.bind(event);

        this.props.updateState(stateObject);
    },

    render: function () {
        var roles = [];
        var keyCounter = 0;
        var keyName = "";

        for (var rolekey in this.props.roleList) {
            if (this.props.roleList.hasOwnProperty(rolekey)) {
                keyCounter = keyCounter + 1;
                keyName = "role" + keyCounter;
                roles.push(
                    <li><a href="#" onClick={this.handleRoleSelection} key={keyName}>{rolekey}</a></li>
                );
            }
        }

        return (
            <div className="input-group">
                <div className="dropdown">
                    <button className="btn btn-default dropdown-toggle bifrost-dropdown-button" type="button" id="rolesDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">{this.props.selectedRole}
                        <span className="caret"></span>
                    </button>
                    <ul className="dropdown-menu" aria-labelledby="rolesDropdown">{roles}
                    </ul>
                </div>
            </div>
        );
    }
});


var Subroles = React.createClass({
    componentDidMount: function () {
        console.log(this.props.roleList);
    },
    handleSubRoleSelection: function(event) {
        event.preventDefault();
        var stateObject = function () {
            var returnObj = {};
            returnObj["subRoleSelected"] = event.target.textContent;
            return returnObj;
        }.bind(event);

        this.props.updateState(stateObject);
    },

    render: function () {
        var subroles = [];
        var keyCounter = 0;
        var keyName = "";

        for (var subkey in this.props.roleList["_supplierTypes"]["Photography"]["_supplierSubTypes"]) {
            if (this.props.roleList["_supplierTypes"]["Photography"]["_supplierSubTypes"][subkey].hasOwnProperty(subkey)) {
                keyCounter = keyCounter + 1;
                keyName = "subrole" + keyCounter;
                subroles.push(
                    <button type="button" className="btn-sm btn-default col-md-5 bifrost-button" onClick={this.handleSubRoleSelection} key={keyName}>{subkey}</button>
                );
            }
        }

        return (
                <div className="btn-group btn-group-justified">{subroles}
                </div>
        );
    }
});


var Fields = React.createClass({
    render: function () {
        return (
            <div className="input-group">
            </div>
        );
    }
});


ReactDOM.render(
  <SupplierForm getSupplierTemplateUrl="/api/suppliers/GetSuppliersTemplate"
                registerSupplierUrl="/Account/RegisterSupplier" />, document.getElementById('content')
);

//表单本身，这是包含状态的组件。
var SupplierForm=React.createClass({
loadSupplierTemplateFromServer:函数（）{
$.ajax({
url:this.props.getSupplierTemplateUrl，
数据类型：“json”，
是的，
成功：功能（数据）{
this.setState（{supplierTemplate:data}）；
}.绑定（此），
错误：函数（xhr、状态、错误）{
console.error（this.props.getSupplierTemplateUrl，status，err.toString（））；
}.绑定（此）
});
},
手机供应商提交：功能（e）{
e、 预防默认值（）；
$.ajax({
url:this.props.registerSupplierUrl，
数据类型：“json”，
键入：“POST”，
数据：this.state.supplier，
成功：函数（）{
//TODO:供应商注册后现在怎么办？
}.绑定（此），
错误：函数（xhr、状态、错误）{
//TODO：如果出现错误，请根据错误类型指导用户继续操作
console.error（this.props.registerSupplierUrl，status，err.toString（））；
}.绑定（此）
});
},
getInitialState:函数（）{
返回{
角色选择：“选择一个角色”，
次出租人：，
供应商模板：[]
};
},
componentDidMount:function（）{
此.loadSupplierTemplateFromServer（）；
},
updateState:函数（stateObject）{
this.setState（stateObject）；
},
渲染：函数（）{
返回(
基本信息
你的职业是？
你的职业是？
);
}
});
//基本信息是表单的一部分
var BasicInformation=React.createClass({
车把底座更换：功能（事件）{
var stateObject=函数（）{
var returnObj={}；
returnObj[event.target.name]=event.target.value；
返回OBJ；
}.约束（事件）；
this.props.updateEstate（stateObject）；
},
渲染：函数（）{
var字段=[]；
var-keyCounter=0；
var-keyName=“”；
for（本.props.basicInfo中的var basickey）{
if（this.props.basicInfo.hasOwnProperty（basickey））{
键计数器=键计数器+1；
keyName=“basic”+键计数器；
推(
);
}
}
返回(
{fields}
);
}
});
var Roles=React.createClass({
handleRoleSelection:函数（事件）{
event.preventDefault（）；
var stateObject=函数（）{
var returnObj={}；
returnObj[“roleSelected”]=event.target.textContent；
返回OBJ；
}.约束（事件）；
this.props.updateEstate（stateObject）；
},
渲染：函数（）{
var角色=[]；
var-keyCounter=0；
var-keyName=“”；
for（此.props.roleList中的var rolekey）{
if（this.props.roleList.hasOwnProperty（rolekey））{
键计数器=键计数器+1；
keyName=“role”+键计数器；
角色推送(

);
}
}
返回(
{this.props.selectedRole}
{roles}

);
}
});
var Subroles=React.createClass({
componentDidMount:函数（）{
console.log（this.props.roleList）；
},
HandleSubrole选择：功能（事件）{
event.preventDefault（）；
var stateObject=函数（）{
var returnObj={}；
returnObj[“subsoleselected”]=event.target.textContent；
返回OBJ；
}.约束（事件）；
this.props.updateEstate（stateObject）；
},
渲染：函数（）{
var子变量=[]；
var-keyCounter=0；
var-keyName=“”；
for（此.props.roleList[“\u supplierTypes”][“Photography”][“\u supplierSubTypes”]中的var子键）{
if（this.props.roleList[“\u supplierTypes”][“Photography”][“\u supplierSubTypes”][subkey].hasOwnProperty（subkey））{
键计数器=键计数器+1；
keyName=“subrole”+键计数器；
推(
{子键}
);
}
}
返回(
{subroles}
);
}
});
变量字段=React.createClass({
渲染：函数（）{
返回(
);
}
});
ReactDOM.render(
，document.getElementById（'content'））
);

当组件第一次呈现时，

this.state.supplierTemplate

是一个空数组，因此将

this.state.supplierTemplate[“\u supplierTypes”]

传递给子级实际上将传递

未定义的
。只有在Ajax调用返回后，
this.state.supplierTemplate
才可能具有这样的属性。基本上