react setState里的作用域

Posted 2021-11-22 zhixi

从接触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()的参数永远也不会有值

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