正文

react this.props.form异步执行问题

IP云V管理员/2022-08-29/5 阅读

08/29

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

最近在做一个选择器联动时，碰到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;

相关阅读

目录[+]