首页 > React 写的setState无效,大神看下是哪里出了问题

React 写的setState无效,大神看下是哪里出了问题

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没有跟着新的数据刷新?我猜你应该是在ListUlgetInitialState或者componentWillMountthis.props.data赋值给了内部的state

两种解决方式:

  1. 你在ListUl的render里直接使用this.props.data去画你的内容。不需要搞什么赋值了。

  2. 如果非想把this.props.data赋值给ListUl里的state,那你需要在ListUl里实现componentWillReceiveProps方法,在这个里面把this.props.datastate关联起来.

看我的plunker

【热门文章】
【热门文章】