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

• Z时代
• 2024-01-10
• 分类：综合

最近在做一个选择器联动时，碰到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异步执行问题 的全部内容， 来源链接： utcz.com/z/382198.html