我目前正在处理我的webapp,在其中一个组件中,我正在获取一些数据库数据:
var SelectHund = React.createClass({
getInitialState: function() {
return {
hunde:{}
};
},
componentDidMount: function(){
var that = this;
$.ajax({
type: "POST",
url: "/foodoo/index.php?method=getDogs",
data: JSON.stringify(planData),
success: function(response){
var hunde = JSON.parse(response);
console.log(hunde);
if(hunde.length >= 1){
that.setState({
hunde: hunde
});
}
},
error: function(){
}
});
},
render: function(){
if(this.state.hunde.length <= 0){
return(<div>test</div>);
}else{
// console.log(this.state);
// console.log(this.state.hunde);
var POS = this.state.hunde.map(function(i){
console.log(i);
return <option key={i.id} value={i.weight}>i.name</option>;
});
return(<select className="selectHund" name="hund">{POS}</select>);
}
}
});
组件被调用如下:
return (
<div>
<h2>{this.state.planname}<span className="close">x</span></h2>
<SelectHund changeHund={this.changeHund} />
...
使用该方法,我使用map函数运行响应对象,即&#34; i&#34;返回单个对象,如下所示:
Object {id: "1", user_id: "1", name: "Balou", weight: "15", activity: "1"…}
Object {id: "2", user_id: "1", name: "Franzi", weight: "70", activity: "1"…}
所以我猜对象处理没有错误。
不幸的是,我一直在控制台中收到此错误:
Uncaught Error: Invariant Violation: SelectHund.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.
我试过在ajax函数之外调用一个外部函数来查看这是否会导致错误,但它没有。其他一些业余尝试调试也失败了 - 所以我需要你的帮助^^
答案 0 :(得分:2)
您的render
方法不会返回任何内容。你需要移动这一行:
return(<select onChange={that.props.changeHund} className="selectHund" name="hund">{POS}</select>);
到success
回调之外。然后你将面临其他问题,但这是正确的方向。
不是在render函数中执行Ajax,而是将其移动到另一个生命周期方法(如componentDidMount
)或像Flux这样的数据模型。
然后使用状态或道具来处理内部组件数据(在您的示例中为hunde
对象)。根据文档/教程中的一些示例,可以帮助您入门。