最近在做一个选择器联动时,碰到this.props.form的异步执行问题,导致选择器一直没有办法联动

如图,选择公司名称后,应该同步刷新门店选择默认值,

但同时又要清空门店选择的上一次记录

就用到了this.props.form中的setFieldsValue()方法来清空,但是this.props.form却是在最后才执行,导致选择的默认值 一直为空

上代码:

var paramsNew = {};
let order = React.createClass({
mixins: [LoadingMixin,NotificationMixin,RequestMixin],
getInitialState(){
return {
data: [],
param:{}, }
},
componentWillMount(){
this.companyList()
},
componentWillUnmount(){ }, companyList(){
this.get({ //公司列表
url:"Api/lists/*******bac",
param: {
},
noLoading: true
}).then(result=> {
this.setState({
tableCompanyName: result.result || [],
},this.shopsList)
});
}, shopsList(){
this.get({ //门店列表
url: "Api/lists/******af4bac",
param: {
companyid:this.state.param.companyid ? this.state.param.companyid :'',
},
noLoading: true
}).then(result=> { if(result.result == null){
paramsNew.shopid = '' }else {
paramsNew.shopid = result.result[0].id }
this.setState({shopsList: result.result || [],param:paramsNew}); });
}, companyChange(value){
console.log("cpanyChange-?*--",value);
this.props.form.setFieldsValue({
shopid:'' //此步一直异步执行,每次都是在最后才清空,导致请求的数据 的默认选择中值 一直为空
})
paramsNew.companyid = value;
paramsNew.shopid = ""
// console.log("paramsNew--------11-------",paramsNew);
this.setState({
param: paramsNew,
},this.shopsList)
}, render() {
const { getFieldDecorator } = this.props.form;
return (
<div className="order-main">
<div className="title">
<h2>订单管理</h2>
</div>
<div className="form-search">
<Form layout="inline" onSubmit={this.handleSubmit} autoComplete="off">
<FormItem>
{
getFieldDecorator('companyid',{
initialValue: this.state.param && this.state.param.companyid || '',
})(
<Select style={{ width: '120px' }}
onChange={this.companyChange}
disabled={this.state.tableCompanyName.length == 1 ? true: false}
>
<Option value=""> --公司名称-- </Option>
{
this.state.tableCompanyName && this.state.tableCompanyName.map((item,index) => {
return (
<Option key={item.id} value={item.id}> {item.title}</Option>
)
})
}
</Select>
)
}
</FormItem> <FormItem>
{
getFieldDecorator('shopid',{
initialValue: this.state.param && this.state.param.shopid || '', })(
<Select style={{ width: '120px' }} >
{
this.state.shopsList && this.state.shopsList.map((item,index) => {
return (
<Option key={item.id} value={item.id}> {item.title}</Option>
)
})
}
</Select>
)
}
</FormItem> <Button type="primary" htmlType="submit">查询</Button>
{/*<Button onClick={this.handleReset}>重置</Button>*/}
</Form>
</div>
<div> </div>
</div>
)
}
});
order = createForm()(order);
export default order;

想了下,将表单字段 清空方法放进数据 请求中清空,才解决这个问题

var paramsNew = {};
let order = React.createClass({
mixins: [LoadingMixin,NotificationMixin,RequestMixin],
getInitialState(){
return {
data: [],
param:{}, }
},
componentWillMount(){
this.companyList()
},
componentWillUnmount(){ }, companyList(){
this.get({ //公司列表
url:"Api/lists/*******bac",
param: {
},
noLoading: true
}).then(result=> {
this.setState({
tableCompanyName: result.result || [],
},this.shopsList)
});
}, shopsList(){
this.get({ //门店列表
url: "Api/lists/******af4bac",
param: {
companyid:this.state.param.companyid ? this.state.param.companyid :'',
},
noLoading: true
}).then(result=> { if(result.result == null){
paramsNew.shopid = ''
this.props.form.setFieldsValue({
shopid:'' //将清空方法放到此处清空,可以解决异步问题
})
}else {
paramsNew.shopid = result.result[0].id
this.props.form.setFieldsValue({
shopid:result.result[0].id //将清空方法放到此处直接赋值,可以解决异步问题
})
}
this.setState({shopsList: result.result || [],param:paramsNew}); });
}, companyChange(value){
console.log("cpanyChange-?*--",value);
// this.props.form.setFieldsValue({
// shopid:''
// })
paramsNew.companyid = value;
paramsNew.shopid = ""
// console.log("paramsNew--------11-------",paramsNew);
this.setState({
param: paramsNew,
},this.shopsList)
}, render() {
const { getFieldDecorator } = this.props.form;
return (
<div className="order-main">
<div className="title">
<h2>订单管理</h2>
</div>
<div className="form-search">
<Form layout="inline" onSubmit={this.handleSubmit} autoComplete="off">
<FormItem>
{
getFieldDecorator('companyid',{
initialValue: this.state.param && this.state.param.companyid || '',
})(
<Select style={{ width: '120px' }}
onChange={this.companyChange}
disabled={this.state.tableCompanyName.length == 1 ? true: false}
>
<Option value=""> --公司名称-- </Option>
{
this.state.tableCompanyName && this.state.tableCompanyName.map((item,index) => {
return (
<Option key={item.id} value={item.id}> {item.title}</Option>
)
})
}
</Select>
)
}
</FormItem> <FormItem>
{
getFieldDecorator('shopid',{
initialValue: this.state.param && this.state.param.shopid || '',
})(
<Select style={{ width: '120px' }} >
{
this.state.shopsList && this.state.shopsList.map((item,index) => {
return (
<Option key={item.id} value={item.id}> {item.title}</Option>
)
})
}
</Select>
)
}
</FormItem> <Button type="primary" htmlType="submit">查询</Button>
{/*<Button onClick={this.handleReset}>重置</Button>*/}
</Form>
</div>
<div> </div>
</div>
)
}
});
order = createForm()(order);
export default order;

react this.props.form异步执行问题的更多相关文章

  1. React的useEffect与useLayoutEffect执行机制剖析

    引言 useEffect和useLayoutEffect是React官方推出的两个hooks,都是用来执行副作用的钩子函数,名字类似,功能相近,唯一不同的就是执行的时机有差异,今天这篇文章主要是从这两 ...

  2. Python开发程序:RPC异步执行命令(RabbitMQ双向通信)

    RPC异步执行命令 需求: 利用RibbitMQ进行数据交互 可以对多台服务器进行操作 执行命令后不等待命令的执行结果,而是直接让输入下一条命令,结果出来后自动打印 实现异步操作 不懂rpc的请移步h ...

  3. React(17)异步组件

    26.异步组件当在React里使用异步组件时,核心知识是两个: webpack 如何异步加载其他模块:通过 require(['xxx'], function(module){})来实现:React ...

  4. 附实例!图解React的生命周期及执行顺序

    本文由云+社区发表 作者:前端林子 1.七个可选的生命周期 可以结合下图来看: (1) componentWillMount() 仅在render()方法前被调用一次,如果在该方法中调用了setSta ...

  5. React中props

    今天让我们开启新的篇章好吧,来搞一搞React,以下所有操作都是我个人的一些理解,如果有错吴还请指出,想要看更全的可以去React官网可能一下子好吧 昨天按摩没到位,导致今天身体不太行,撸码千万别苦了 ...

  6. React中Props 和 State用法

    React中Props 和 State用法 1.本质 一句话概括,props 是组件对外的接口,state 是组件对内的接口.组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下 ...

  7. react生命周期获取异步数据

    当react组件需要获取异步数据的时候,建议在ComponentDidMount周期里执行获取动作, 如果非异步数据,可以在ComponentWillMount获取 因为ComponentWillMo ...

  8. Python开发【项目】:RPC异步执行命令(RabbitMQ双向通信)

    RPC异步执行命令 需求: 利用RibbitMQ进行数据交互 可以对多台服务器进行操作 执行命令后不等待命令的执行结果,而是直接让输入下一条命令,结果出来后自动打印 实现异步操作 不懂rpc的请移步h ...

  9. sql异步执行

    /// <summary> /// 按钮事件 异步执行 /// </summary> /// <param name="sender">< ...

随机推荐

  1. 关于windows10设置环境变量的问题

    在设置环境变量的时候往往在网上能找到这样的文章: 1:新建环境变量 2:将新增的环境变量 加到path 变量中: 3.由于有的小伙伴的 系统是 windows10 在点击 编辑path 环境变量的时候 ...

  2. jsonp、瀑布流布局、组合搜索、多级评论(评论树)、Tornado初识

    1.JSONP原理剖析以及实现 1.1 同源策略限制 用django分别建立两个项目,jsonp01和jsonp02,然后再在这两个项目里分别建立一个app,比如名字叫jsonp1.jsonp2:js ...

  3. Python 快速部署安装所需模块

    需求 我们需要在拷给别人或者提交至服务器也用同样的模块,好保持和开发的一样,所以我们需要自己手动写配置模块信息. 方法 在根目录下创建一个 requirements.txt  文件 里面写 模块名== ...

  4. 【转载】Unity3D研究院之与根据动态的两个轨迹点绘制面详解

    大家应该知道3D世界中任何的面都是由三角形绘制完成的,因为任何无规则的集合图形都可以由三角形来组成.比如四边形,无论是正四边形还是无规则四边形都可以由两个三角形拼接而成.结合本文的标题大家仔细想想,如 ...

  5. win10激活(转)

    批处理命令激活方法,此方法和激活码可激活 180天 先来说下使用激活码使用方法: 1.同时按下Win键+X,然后选择命令提示符(管理员) 2.在命令提示符中依次输入: slmgr.vbs /upk ( ...

  6. pytorch版本问题:AttributeError: 'module' object has no attribute '_rebuild_tensor_v2'

    用pytorch加载训练好的模型的时候遇到了如下的问题: AttributeError: 'module' object has no attribute '_rebuild_tensor_v2' 到 ...

  7. shell之netstat命令

      语 法:netstat [-acCeFghilMnNoprstuvVwx] [-A<网络类型>][--ip] 补充说明:利用netstat指令可让你得知整个Linux系统的网络情况. ...

  8. hadoop2.6.4【ubuntu】单机环境搭建 系列1

    jdk安装 tar zxvf jdk mv jdk /usr/lib/jvm/java jdk环境变量配置 vim /etc/profile ``` export JAVA_HOME=/usr/lib ...

  9. linux运维文章

    运维中关键技术点解剖:1 大量高并发网站的设计方案 :2 高可靠.高可伸缩性网络架构设计:3 网站安全问题,如何避免被黑?4 南北互联问题,动态CDN解决方案:5 海量数据存储架构 一.什么是大型网站 ...

  10. BZOJ4652 [Noi2016]循环之美 【数论 + 莫比乌斯反演 + 杜教筛】

    题目链接 BZOJ 题解 orz 此题太优美了 我们令\(\frac{x}{y}\)为最简分数,则\(x \perp y\)即,\(gcd(x,y) = 1\) 先不管\(k\)进制,我们知道\(10 ...