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;