从接触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里的作用域的更多相关文章

  1. 动态修改JS对象的值及React setState

    一.在JS里使用(非ES6) 实现场景: 给一个空对象填充某一指定数组内的值 并随机生成数量 const fruit = ['apple', 'banana', 'orange'] let fruit ...

  2. 混合开发的大趋势之 一个Android程序员眼中的 React.js 块级作用域 和 let

    转载请注明出处:王亟亟的大牛之路 最近都有事干然后,快到月底了这个月给CSDN的博文也就两篇,想想也蛮多天没更了,那就来一篇. 老规矩,先安利:https://github.com/ddwhan012 ...

  3. React/Vue里的key到底有什么用?看完这篇你就知道了!(附demo代码)

    网上有很多博客讲到,React.Vue里的key,与 Virtual DOM 及 DOM diff 有关, 可以用来唯一标识DOM节点,提高diff效率,云云. 这大致是对的,但是,大多讲得语焉不详, ...

  4. 深入研究React setState的工作机制

    前言 上个月发表了一篇 React源码学习--ReactClass,但是后来我发现,大家对这种大量贴代码分析源码的形式并不感冒.讲道理,我自己看着也烦,还不如自己直接去翻源码来得痛快.吸取了上一次的教 ...

  5. [Web 前端] 我不再使用React.setState的3个原因

    copy from : https://blog.csdn.net/smk108/article/details/85237838 从几个月前开始,我在新开发的React组件中不再使用setState ...

  6. 关于React setState的实现原理(二)

    React中的Transaction 大家学过sql server的都知道我们可以批量处理sql语句,原理其实都是基于上一篇我们说的Datch Update机制.当所有的操作均执行成功,才会执行修改操 ...

  7. 关于React setState的实现原理(三)

    前面提到事务即将结束时,会去调用FLUSH_BATCHED_UPDATES的flushBatchedUpdates方法执行批量更新,该方法会去遍历dirtyComponents,对每一项执行perfo ...

  8. 关于React setState的实现原理(一)

    前言 首先在学习react的时候就对setSate的实现有比较浓厚的兴趣,那么对于下边的代码,可以快速回答吗? class Root extends React.Component { constru ...

  9. react setState修改嵌套对象

    在react使用setState过程中,难免会遇到复杂的数据类型,,这里还要提醒一下setState 是异步操作行为,需要setState之后的结果做为参数,请求数据的话,可以配合 async  aw ...

随机推荐

  1. 新工具填补Docker管理空白

    [TechTarget中国原创] 从事容器管理领域的IT运维专家这周需要评估一个新的工具. Docker推出了一款新产品,意在让IT运维人员能够跟上开发人员的脚步,这一产品是Docker Datace ...

  2. 《Cracking the Coding Interview》——第3章:栈和队列——题目1

    2014-03-18 03:19 题目:用一个数组实现3个栈. 解法: 首先我想过让三个栈动态决定长度.要么左右各一个向中间靠拢,要么三个穿插着,后来都觉得实现起来太复杂,而且思路总有各种功能缺陷,会 ...

  3. USACO Section2.3 Longest Prefix 解题报告 【icedream61】

    prefix解题报告------------------------------------------------------------------------------------------ ...

  4. Windows Phone 图片扩展类

    using System.IO; using System.Text; using System.Net; using System.Threading.Tasks; using System.Win ...

  5. Linux之Permission denied没有权限

    在Linux上启动solr时,出现-bash: ./solr: Permission denied的问题. 最简单的解决方式: chmod 777 solr 傻瓜式直接赋予权限

  6. C编译器MinGW安装、下载及在notepad++中运行C程序

    一.C编译器MinGW的下载及安装步骤 打开MinGW官网:http://www.mingw.org/ 图一 图二 图三 图四 图五 图六 系统中配置环境变量: 图七 验证是否安装成功: CMD中运行 ...

  7. python 学习分享-进程

    python中的多线程其实并不是真正的多线程,如果想要充分地使用多核CPU的资源,在python中大部分情况需要使用多进程.Python提供了非常好用的多进程包multiprocessing,只需要定 ...

  8. MVC从Controller到view进行传值的方法

    这几天基本上都是交接的一些杂事,没有什么工作任务,就有空来回顾一下MVC.虽然工作中也用到了MVC,但已经被微软的架构师设计的找不到MVC的影子了,可能有别的考虑吧,至今还没研究出来.所以,今天就来回 ...

  9. Java操作 Redis 集群

    // 连接redis集群 @Test public void testJedisCluster() { JedisPoolConfig config = new JedisPoolConfig(); ...

  10. task [最大权闭合子图]

    题面 思路 其实仔细读透就发现,是一个最大权闭合子图的模型 套进网络流里面就挺好做的了 可以选择重载这道题里面的一些运算(加减,取最小值),这样比较方便 Code #include<iostre ...