标签: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()的参数永远也不会有值
而且我们要解决它也很简单,去掉()就行啦
标签:top let style 游戏 span cat ber nconf tin
原文地址:https://www.cnblogs.com/zhixi/p/10621012.html