javascript - React 写的setState无效,大神看下是哪里出了问题
天蓬老师
天蓬老师 2017-04-10 15:51:18
[JavaScript讨论组]
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 (
            <p id="List">
                <header id="detailHeadList">
                    <p className="row">
                        <p className="back col-4"><i className="anticon anticon-left"></i> 返回</p>
                        <p className="title col-16">活动列表</p>
                    </p>
                </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} />

                <p id="typeMenu" className="menulist">
                    {
                        this.state.typedata.map(function(data){
                            return <p id={data.id} onClick={this.changeType}>{data.title}</p>
                        }.bind(this))
                    }
                    
                </p>

                <p id="timeMenu" className="menulist">
                    {
                        this.state.timedata.map(function(data){
                            return <p id={data.id} onClick={this.changeTime}>{data.title}</p>
                        }.bind(this))
                    }
                </p>


            </p>
        );
    }
});

功能是每修改一次分类,时间,或者社区,就会重新从服务器上面拉数据。
但是每一次发送过去的都是初始值。
怎么破?

+++++++++++
补充:
可以肯定是因为ajax延迟接收到更新的参数,或者ajax现行了,取到的是旧的state

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

全部回复(1)
PHP中文网

你的问题应该是ListUl没有跟着新的数据刷新?我猜你应该是在ListUlgetInitialState或者componentWillMountthis.props.data赋值给了内部的state

两种解决方式:

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

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

看我的plunker

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号