react this.props.form异步执行问题
最近在做一个选择器联动时，碰到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异步执行问题的更多相关文章
- React的useEffect与useLayoutEffect执行机制剖析
引言 useEffect和useLayoutEffect是React官方推出的两个hooks,都是用来执行副作用的钩子函数,名字类似,功能相近,唯一不同的就是执行的时机有差异,今天这篇文章主要是从这两 ...
- Python开发程序：RPC异步执行命令（RabbitMQ双向通信）
RPC异步执行命令 需求: 利用RibbitMQ进行数据交互 可以对多台服务器进行操作 执行命令后不等待命令的执行结果,而是直接让输入下一条命令,结果出来后自动打印 实现异步操作 不懂rpc的请移步h ...
- React（17）异步组件
26.异步组件当在React里使用异步组件时,核心知识是两个: webpack 如何异步加载其他模块:通过 require(['xxx'], function(module){})来实现:React ...
- 附实例！图解React的生命周期及执行顺序
本文由云+社区发表 作者:前端林子 1.七个可选的生命周期 可以结合下图来看: (1) componentWillMount() 仅在render()方法前被调用一次,如果在该方法中调用了setSta ...
- React中props
今天让我们开启新的篇章好吧,来搞一搞React,以下所有操作都是我个人的一些理解,如果有错吴还请指出,想要看更全的可以去React官网可能一下子好吧 昨天按摩没到位,导致今天身体不太行,撸码千万别苦了 ...
- React中Props 和 State用法
React中Props 和 State用法 1.本质 一句话概括,props 是组件对外的接口,state 是组件对内的接口.组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下 ...
- react生命周期获取异步数据
当react组件需要获取异步数据的时候,建议在ComponentDidMount周期里执行获取动作, 如果非异步数据,可以在ComponentWillMount获取 因为ComponentWillMo ...
- Python开发【项目】：RPC异步执行命令（RabbitMQ双向通信）
RPC异步执行命令 需求: 利用RibbitMQ进行数据交互 可以对多台服务器进行操作 执行命令后不等待命令的执行结果,而是直接让输入下一条命令,结果出来后自动打印 实现异步操作 不懂rpc的请移步h ...
- sql异步执行
/// <summary> /// 按钮事件 异步执行 /// </summary> /// <param name="sender">< ...
随机推荐
- PL/SQL 循环语句
1.基本 LOOP 循环语句 语法: LOOP 语句序列; END LOOP; 其中,语句序列中需要一个EXIT语句或一个EXIT WHEN语句来中断循环. 实例: DECLARE x ) :; BE ...
- 每天一个Linux命令（3）：ls命令
ls命令用来显示目标列表,在Linux中是使用率较高的命令.ls命令的输出信息可以进行彩色加亮显示,以分区不同类型的文件. 语法 ls(选项)(参数) 选项 -a:显示所有档案及目录(ls内定将档案名 ...
- CentOS6/7-防火墙管理
#CentOS6 #开放端口运行外部访问(不指定源IP) iptables -I INPUT -p tcp --dport -j ACCEPT iptables -I INPUT -p tcp --d ...
- C# 命名管道
有些场合需要高效率,进行线程间通信,可以使用 C#命名管道.
- v-if与v-show区别
在v-show中,元素是一直存在的,当v-show为false时,元素display:none只是隐藏了而已. v-if 作用:判断是否加载固定的内容,如果为真,则加载:为假时,则不加载. 用处:用在 ...
- 利用nat.123实现SVN外网访问
背景: 在高效平台的合作中,我们用到了很多团队合作开发的工具,比如SVN.禅道.Confluence等等.有了这些工具,我们可以很好的进行团队合作交流.但同样有所限制,这些工具都是发布在局域网中,只能 ...
- PB常用事件
1.window中的事件 事件名 触发的时机 01.Activate 在窗口激活之前触发 02.Clicked 当用户用 ...
- P4305 [JLOI2011]不重复数字
题目描述 给出N个数,要求把其中重复的去掉,只保留第一次出现的数. 例如,给出的数为1 2 18 3 3 19 2 3 6 5 4,其中2和3有重复,去除后的结果为1 2 18 3 19 6 5 4. ...
- AtCoder keyence2019 E Connecting Cities
keyence2019_e $N$ 个节点的无向图 $G$,节点 $i,j$ 之间的边权值为 $|i - j| \times D + A_i + A_j$ . 求最小生成树(Minimum Spann ...
- POJ 3974 Palindrome | 马拉车模板
给一个字符串,求最长回文字串有多长 #include<cstdio> #include<algorithm> #include<cstring> #define N ...