码迷,mamicode.com
首页 > 其他好文 > 详细

react setState里的作用域

时间:2019-03-29 14:32:05      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:top   let   style   游戏   span   cat   ber   nconf   tin   

从接触racet开始,我们就认识了setState,它是对全局变量进去更新的一个重要方法,

不仅可以更新数据,还能在更新后执行方法时直接调用刚刚更新的数据 

今天碰到的问题就在于它的作用域的先后问题

先看一段代码

let productList =  React.createClass({
    mixins: [LoadingMixin,NotificationMixin,RequestMixin],
    getInitialState(){
        return {
            data: [],
            param:{}
            pagination: {showQuickJumper: true,showTotal: total => `共 ${total} 条`},
        }
    },
    componentWillMount() {
        let param = {}
        param.shopid = ‘1‘
        this.setState({
            param: param,
        },this.fetch());
        
    
    },
    fetch(pageNum = 1, pageSize = 10) {
        this.get({
            url: "Api/lists/*************f4bac",
            param: {
                shopid:this.state.param && this.state.param.shopid || ‘‘,
                p: pageNum,
                n: pageSize
            },
            noLoading: true
        }).then(result=> {
            const pagination = this.state.pagination;
            pagination.total = Number(result.count);
            this.setState({data: result.result || [],oldData: result.result || []});
        });
    },
    
    render() {
        const { getFieldDecorator } = this.props.form;
        let statusObj = {
            1: "有效",
            2: "无效"
        };
        let needLoginObj = {
            1: "会员",
            2: "普通"
        };
        let needNetObj = {
            1: "外网",
            2: "本地"
        };
        let columns = [
            { title: ‘编号‘,dataIndex: ‘id‘, key: ‘id‘, width: ‘6%‘},
            { title: ‘图标‘, dataIndex: ‘icon‘, key: ‘icon‘, width: ‘9%‘ ,
                render: (text, record) => {
                    return (
                        text ? <img style={{width: "50px",height: "50px"}} src={text} /> : <div></div>
                    )
                }
            },
            { title: ‘分类名称‘, dataIndex: ‘classid‘, key: ‘classid‘, width: ‘10%‘,
                render: (text, record) => {
                    return (this.state.gameClassObj[text])
                }
            },
      
            { title: ‘游戏名称‘, dataIndex: ‘title‘, key: ‘title‘, width: ‘10%‘ },
            { title: ‘游戏地址‘, dataIndex: ‘gameurl‘, key: ‘gameurl‘, width: ‘15%‘ },
            { title: ‘是否外网‘, dataIndex: ‘neednet‘, key: ‘neednet‘, width: ‘10%‘,
                render: (text, record) => {
                    return (needNetObj[text])
                }
            },
            { title: ‘类别‘, dataIndex: ‘needlogin‘, key: ‘needlogin‘, width: ‘10%‘,
                render: (text, record) => {
                    return (needLoginObj[text])
                }
            },
            { title: ‘排序‘, dataIndex: ‘no‘, key: ‘no‘, width: ‘8%‘ },
            { title: ‘状态‘, dataIndex: ‘state‘, key: ‘state‘, width: ‘8%‘,
                render: (text, record) => {
                    return (
                        statusObj[record["state"]]
                    )
                }
            },
            { title: ‘操作‘, key: ‘#‘, width: ‘14%‘,
                render: (text, record) => {
                    return (
                        <div>
                            <Button type="primary" onClick={this.addOrUpdate.bind(this,record)}>修改</Button>
                            <Popconfirm placement="topRight" title={"您确定要删除该数据吗?"} onConfirm={this.handleClose.bind(this,record)} okText="确定" cancelText="取消">
                                <Button type="primary" >删除</Button>
                            </Popconfirm>

                        </div>
                    )
                }
            }
        ];
        return (
            <div className="modular-main">
                <div className="title">
                    <h2>游戏列表</h2>
                </div>
                
                <div>
                    <Table columns={columns}
                           dataSource={this.state.data}
                           pagination ={false}
                           scroll={{ y: 600 }}
                           rowKey={(record) => record.id}
                    >
                    </Table>
                </div>
            </div>
        )
    }
});
productList = createForm()(productList);
export default productList;

 

以上代码看似毫无问题,但实际上fetch方法中的请求参数shopid永远也收不到值 ,这是为什么呢

this.setState({
    param: param,
},this.fetch());


this.setState({
    param: param,
},this.fetch);

其实问题就在this.fetch()中的()上

查阅资料后才知道,在react的生命周期componentWillMount里,带()的方法会被优先执行,而在setState的作用域还没起作用的时候,this.fetch()就已经开始执行了,所以this.fetch()的参数永远也不会有值

而且我们要解决它也很简单,去掉()就行啦

react setState里的作用域

标签:top   let   style   游戏   span   cat   ber   nconf   tin   

原文地址:https://www.cnblogs.com/zhixi/p/10621012.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!