最近在做一个选择器联动时,碰到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. Scrapy使用示例

    很多网站都提供了浏览者本地的天气信息,这些信息是如何获取到的呢,方法有很多种,大多是利用某些网站提供的天气api获取的,也有利用爬虫采集的.本文就介绍如何用Scrapy来采集天气信息(从新浪天气频道采 ...

  2. 利用binlog server及Xtrabackup备份集来恢复误删表(drop)

      Preface       Today I'm gonna test how to rescue a dropped table from binlog server based on a ful ...

  3. 1、python 循环控制

     案例1: lucky_num = 19 input_num = int(input("Input the guess number:")) if input_num == luc ...

  4. $this和self、parent这三个关键词分别代表什么?在哪些场合下使用?

    $this:当前对象 self: 当前类 parent: 当前类的父类 $this在当前类中使用,使用->调用属性和方法. self也在当前类中使用,不过需要使用::调用. 静态属性,不能在类里 ...

  5. 使用hadoop统计多个文本中每个单词数目

    程序源码 import java.io.IOException; import java.util.StringTokenizer; import org.apache.hadoop.conf.Con ...

  6. 【bzoj2959】长跑 LCT+并查集

    题目描述 某校开展了同学们喜闻乐见的阳光长跑活动.为了能“为祖国健康工作五十年”,同学们纷纷离开寝室,离开教室,离开实验室,到操场参加3000米长跑运动.一时间操场上熙熙攘攘,摩肩接踵,盛况空前.为了 ...

  7. Codeforces Round #386 (Div. 2) 746G(树的构造)

    大体题意 一棵树有n个结点,告诉你每层深度上有a[i]个结点,以及有多少叶子结点 让你生成这棵树 题解:考虑一颗树,如果满足每层深度上有a[i]结点,最多能有多少叶子结点 那么答案很简单,就是对(a[ ...

  8. 关于spark RDD trans action算子、lineage、宽窄依赖详解

    这篇文章想从spark当初设计时为何提出RDD概念,相对于hadoop,RDD真的能给spark带来何等优势.之前本想开篇是想总体介绍spark,以及环境搭建过程,但个人感觉RDD更为重要 铺垫 在h ...

  9. BZOJ1027 [JSOI2007]合金 【计算几何 + floyd】

    题目 某公司加工一种由铁.铝.锡组成的合金.他们的工作很简单.首先进口一些铁铝锡合金原材料,不同种类的 原材料中铁铝锡的比重不同.然后,将每种原材料取出一定量,经过融解.混合,得到新的合金.新的合金的 ...

  10. 使用C#创建windows服务程序

    创建windows服务项目 一.创建服务 1.文件->新建->项目->windows桌面->windows服务,修改你要的项目名称.我这不改名,仍叫WindowsService ...