react setState里的作用域
从接触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里的作用域的更多相关文章
- 动态修改JS对象的值及React setState
一.在JS里使用(非ES6) 实现场景: 给一个空对象填充某一指定数组内的值 并随机生成数量 const fruit = ['apple', 'banana', 'orange'] let fruit ...
- 混合开发的大趋势之 一个Android程序员眼中的 React.js 块级作用域 和 let
转载请注明出处:王亟亟的大牛之路 最近都有事干然后,快到月底了这个月给CSDN的博文也就两篇,想想也蛮多天没更了,那就来一篇. 老规矩,先安利:https://github.com/ddwhan012 ...
- React/Vue里的key到底有什么用?看完这篇你就知道了!(附demo代码)
网上有很多博客讲到,React.Vue里的key,与 Virtual DOM 及 DOM diff 有关, 可以用来唯一标识DOM节点,提高diff效率,云云. 这大致是对的,但是,大多讲得语焉不详, ...
- 深入研究React setState的工作机制
前言 上个月发表了一篇 React源码学习--ReactClass,但是后来我发现,大家对这种大量贴代码分析源码的形式并不感冒.讲道理,我自己看着也烦,还不如自己直接去翻源码来得痛快.吸取了上一次的教 ...
- [Web 前端] 我不再使用React.setState的3个原因
copy from : https://blog.csdn.net/smk108/article/details/85237838 从几个月前开始,我在新开发的React组件中不再使用setState ...
- 关于React setState的实现原理(二)
React中的Transaction 大家学过sql server的都知道我们可以批量处理sql语句,原理其实都是基于上一篇我们说的Datch Update机制.当所有的操作均执行成功,才会执行修改操 ...
- 关于React setState的实现原理(三)
前面提到事务即将结束时,会去调用FLUSH_BATCHED_UPDATES的flushBatchedUpdates方法执行批量更新,该方法会去遍历dirtyComponents,对每一项执行perfo ...
- 关于React setState的实现原理(一)
前言 首先在学习react的时候就对setSate的实现有比较浓厚的兴趣,那么对于下边的代码,可以快速回答吗? class Root extends React.Component { constru ...
- react setState修改嵌套对象
在react使用setState过程中,难免会遇到复杂的数据类型,,这里还要提醒一下setState 是异步操作行为,需要setState之后的结果做为参数,请求数据的话,可以配合 async aw ...
随机推荐
- Eclipse 创建 Java 项目---Eclipse教程第08课
打开新建 Java 项目向导 通过新建 Java 项目向导可以很容易的创建 Java 项目.打开向导的途径有: 通过点击 "File" 菜单然后选择 New > Java P ...
- JavaSE总结--多线程
进程: 进程之间内存隔离,内存不共享. 线程: 可以共享内存. 每个线程都是一个栈. 多线程的好处: 1)防止程序阻塞. wait与notify的区别: 针对等待队列而言. wait:进入等待队列.必 ...
- 软引用SoftReference
本文介绍对象的强.软.弱和虚引用的概念.应用及其在UML中的表示. 1.对象的强.软.弱和虚引用 在JDK 1.2以前的版本中,若一个对象不被任何变量引用,那么程序就无法再使用这个对象.也就是说,只有 ...
- 剑指Offer - 九度1391 - 顺时针打印矩阵
剑指Offer - 九度1391 - 顺时针打印矩阵2013-11-24 04:55 题目描述: 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下矩阵: 1 2 3 4 ...
- 《Cracking the Coding Interview》——第3章:栈和队列——题目3
2014-03-18 05:17 题目:设计一个栈,这个栈实际上由一列子栈组成.每当一个子栈的大小达到n,就新产生下一个子栈.整个栈群对外看起来就像普通栈一样,支持取顶top().压入push().弹 ...
- iOS笔记055 - UI总结01
1.程序启动后的开始动画 程序启动后可以加载一个简单的动画界面来介绍程序或者用户信息. 可以使用一个xib来描述界面.并且如果想在程序加载完成后第一个加载这个xib文件,需要在Appdelegat ...
- Django学习笔记(二):使用Template让HTML、CSS参与网页建立
Django学习笔记(二):使用Template让HTML.CSS参与网页建立 通过本文章实现: 了解Django中Template的使用 让HTML.CSS等参与网页建立 利用静态文件应用网页样式 ...
- 孤荷凌寒自学python第六十二天学习mongoDB的基本操作并进行简单封装1
孤荷凌寒自学python第六十二天学习mongoDB的基本操作并进行简单封装1 (完整学习过程屏幕记录视频地址在文末) 今天是学习mongoDB数据库的第八天. 今天开始学习mongoDB的简单操作, ...
- django通用视图之TemplateView和ListView简单介绍
django支持类视图,与此同时django为我们提供了许多非常好用的通用视图供我们使用,这其中TemplateView.ListView和DetailView是我们经常使用到的,这里就对Templa ...
- UVa 1326 - Jurassic Remains(枚举子集+中途相遇法)
训练指南p.59 #include <cstdio> #include <cstring> #include <cstdlib> #include <map& ...