var List = React.createClass({
getInitialState: function() {
return {
data: [],
typedata:[{id:0,title:"全部分类"},{id:1,title:"广场舞"},{id:2,title:"篮球"},{id:4,title:"社区"},{id:5,title:"男女"},{id:6,title:"兴趣"},{id:7,title:"街舞"},{id:13,title:"爬山"},],
timedata:[{id:0,title:"不限时间"},{id:1,title:"最近3天"},{id:2,title:"最近一周"},{id:3,title:"最近两周"},{id:4,title:"最近一月"}],
styn:'全部分类',
styid:0,
stmn:"不限时间",
stmnid:0,
ssqn:"全部社区",
ssqid:0,
limit:0
};
},
componentDidMount: function() {
this.loadData();
},
loadData:function(){
console.log(this.state)
var _this = this;
loadCommentsFromServer(apiurl,{
action:"activity_list",
num:20,
limit:this.state.limit,
time:this.state.stmnid,
classify:this.state.styid,
cid:this.state.ssqid
}, function(data) {
if(data.error_code == 0){
_this.setState({
data: data.data
});
}else{
if(data.error_code == 1001){
console.log('err:1001');
window.location.href = '#/login';
}else{
alert('错误代码:' + data.error_code + ',请联系管理员!');
}
}
});
},
changesq:function(cid,value){
this.setState({
ssqn:value.split('>')[2],
ssqnid:cid
});
this.loadData();
},
changeType:function(event){
var getid = event.target.getAttribute('id');
var gettext = event.target.innerText;
this.setState({
styn:gettext,
styid:getid
});
$('.menulist').hide();
this.loadData();
},
changeTime:function(event){
var getid = event.target.getAttribute('id');
var gettext = event.target.innerText;
this.setState({
stmn:gettext,
stmnid:getid
});
$('.menulist').hide();
this.loadData();
},
render:function(){
return (
<div id="List">
<header id="detailHeadList">
<div className="row">
<div className="back col-4"><i className="anticon anticon-left"></i> 返回</div>
<div className="title col-16">活动列表</div>
</div>
</header>
<ListTab typedata={this.state.typedata} timedata={this.state.timedata} styn={this.state.styn} stmn={this.state.stmn} ssqn={this.state.ssqn}/>
<ListUl data={this.state.data}/>
<SqListList usersqHandle={this.changesq} />
<div id="typeMenu" className="menulist">
{
this.state.typedata.map(function(data){
return <p id={data.id} onClick={this.changeType}>{data.title}</p>
}.bind(this))
}
</div>
<div id="timeMenu" className="menulist">
{
this.state.timedata.map(function(data){
return <p id={data.id} onClick={this.changeTime}>{data.title}</p>
}.bind(this))
}
</div>
</div>
);
}
});
功能是每修改一次分类,时间,或者社区,就会重新从服务器上面拉数据。
但是每一次发送过去的都是初始值。
怎么破?
+++++++++++
补充:
可以肯定是因为ajax延迟接收到更新的参数,或者ajax现行了,取到的是旧的state
你的问题应该是ListUl
没有跟着新的数据刷新?我猜你应该是在ListUl
的getInitialState
或者componentWillMount
把this.props.data
赋值给了内部的state
。
两种解决方式:
你在
ListUl
的render里直接使用this.props.data
去画你的内容。不需要搞什么赋值了。如果非想把
this.props.data
赋值给ListUl
里的state
,那你需要在ListUl
里实现componentWillReceiveProps
方法,在这个里面把this.props.data
和state
关联起来.
看我的plunker