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

最新推荐文章于 2022-07-19 17:00:03 发布
最新推荐文章于 2022-07-19 17:00:03 发布
阅读量633 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/zhixi/p/10650314.html
版权

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

 

转载于:https://www.cnblogs.com/zhixi/p/10650314.html

weixin_30551963
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React 0.72.3 源代码
07-22
这个版本的源代码提供了深入理解React工作原理的机会，帮助开发者优化应用性能、解决复杂问题以及更好地集成自定义功能。在React Native 0.72.3中，我们主要关注以下几个关键知识点： 1. **React组件化**：React的...
React零基础自学手册.pdf
最新发布
03-31
前端react零基础自学手册，包会，零基础自学手册，本人亲自编写的完整的，包会，非常详细，Lesson 1 - React.js 简介 Lesson 2 - 前端组件化（⼀）：从⼀个简单的例⼦讲起 Lesson 3 - 前端组件化（⼆）：优化 DOM ...
解决ant Design中this.props.form.validateFields未执行的问题
01-18
在使用ant Designd的 form 组件时发现点击提交方法中 this.props.form.validateFields((err, values) => {}) 部分未执行，也没有报错。 原因： 我使用了自定义校验 validator ，在自定义校验方法中有个错误，使用了未定义的变量。 注意： 1、使用validator 时，注意自定义方法中是否有错误；对于如何解决没有错误提示，官网提示：可以选择通过 async 返回一个 promise 或者使用 try…catch进行错误捕获，具体查看官网form组件； 2、使用validator 时，自定义方法中 callback 必须被调用。
React开发（124）:ant design学习指南之form中的this.props.form
歌谣的博客
09-01 1089
react 踩坑----this.props.form.getFieldValue()获取不到输入的值
Seeyoucm
04-11 2万+
this.props.form.getFieldValue()获取不到输入的值
react-3-Props,State,Forms
qq_44777678的博客
07-20 193
通过 Props 传递数据 / 接受父组件传过来的值 Props传过来的值是只读的不能改变 父组件 import React, {PureComponent} from 'react'; import ReactDOM from 'react-dom'; import Test from './test'; // 子组件 const tags = ['恐龙', '足球小子'] class App extends PureComponent { render() { return (
props的传递是异步的
winxin_58206976的博客
10-26 331
props的传递是异步的 案例如下: 父组件 <template> <div class="approvals-container"> <Son :id="num" ref="refSon" /> <button @click="changeID">修改id</button> </div> </template> <script> import Son from './.
React中组件的props.children
01-20
class ParentDom extends React.Component { constructor() { super(); this.state = {}; } render() { return ( 这是在父组件添加的标签 ); } } ``` ### 2. 子组件的创建 创建子组件与创建父组件...
react面试题.md
03-20
上述的React面试题涵盖了React框架的核心概念和常用...5. **props和state：** props和state是React中用于管理数据的两种机制，面试者需要了解它们的区别和作用，以及如何在组件中使用props和state来实现数据的传递和管
React Props/State/Forms 属性和状态
前端博客
09-24 482
状态(State) 和 属性(Props) props 是组件对外的接口，state 是组件对内的接口。 组件内可以引用其他组件，组件之间的引用形成了一个树状结构（组件树），如果下层组件需要使用上层组件的数据或方法，上层组件就可以通过下层组件的props属性进行传递，因此props是组件对外的接口。组件除了使用上层组件传递的数据外，自身也可能需要维护管理数据，这就是组件对内的接口state。根据对...
props的异步加载问题
weixin_56071908的博客
06-06 46
在写vue项目的时候,父组件调用ajax的接口获得数据,然后赋值给data中的初始值,然后通过props传给子组件,子组件在created的时候,获得的props的值有的时候是undefined,因为ajax是异步请求,执行的http线程,js线程执行的过程可能还没有值的返回. 保证在子组件created的时候也有值,解决方案是在父组件中调用子组件的时候写一个v-if,在ajax值返回的时候再v...
React中的props和state
厚积薄发
11-27 1086
props意为属性，只可父组件改变子组件的props，而子组件不能自更新，props是子组件暴露给外部的公有接口state意为状态，所谓的状态就是一种标记，设计用来控制某种逻辑，类似于后台语言中的flag，全局的私有变量，外部不能访问，state的改变会被render()函数自动捕捉到，当然state改变后是否执行render，还取决于bool shouldComponentUpdate(nextP
React-Form表单数据获取
热门推荐
zsspj12的专栏
09-29 2万+
1、  const { getFieldProps } = this.props.form; 2、  //类似给input一个stringName 3、  this.props.form.getFieldsValue();//获取所有stringName的值 4、  this.props.form.getFieldValue(‘userName’);//获取单个控件的值 const For
父组件异步传递的props，子组件更新显示
吃瓜群众的博客
07-15 1167
父组件 import React from "react"; import Component from './components/useEffect' class Test extends React.Component { state = { count:1 } changeNumber =()=>{ let {count} = this.state; count++; this.setState({ count }) .
React赋值后异步更新的问题解决——2022-07-19
m0_51400566的博客
07-19 934
问题复现：点击“编辑”后弹出弹框反显，此时圈出区域已经赋值了，但始终显示的是上一次的结果，就导致第一次打开弹框时为空。如果赋值没问题，那就是更新的问题，存在异步更新。
vue $emit,子组件传出多个参数，如何在父组件中在接收所有参数的同时添加自定义参数
weixin_43840538的博客
09-27 1421
方法一 子组件传出单个参数时： // 子组件 this.$emit('test',this.param) // 父组件 @test='test($event,userDefined)' 方法二 子组件传出多个参数时： // 子组件 this.$emit('test',this.param1，this.param2, this.param3) // 父组件 arguments 是以数组的形式传入 @test='test(arguments,userDefined)' ...
关于antd form this.props.form.getFormValue(): undefined.的bug解决
mym940725的博客
12-01 1万+
在使用ant-design中的form组件时： 解决方法：
关于react中submit如何提交其它form表单的内容
Juniorselk的博客
07-29 6316
给form表单绑定一个id，然后在submit里加上form='form表单的id'即可；这里再补充两点：1，如果需要阻止submit提交的跳转，在需要提交的form表单上，添加一个onClick点击事件，在点击事件里面e.preventDefault()2，如果需要使用表单提交文件或者图片等，不需要转码提交的情况下需要在form表单中添加encType='multipart/form-data'...
015-react---获取和更新表单信息
赳赳万里鲲
12-16 3998
表单应用特别是在后台管理中常用到，本文就来阐述一下如何获取和更新form的内容。 注意： 一个submit按钮可以获取到所有的form表单数据。 如果页面中有多个form时，只想拿到其中几个input的值，那么此时可以用以下方法来获取 this.porps.form.getFieldValue(‘input的name名’); 例如：this.props.form.g...
react this.props.dispatch
05-13
`this.props.dispatch` 是一个函数，它将 action 对象分发到 Redux store 中。在 React 组件中，我们可以通过 `connect` 方法将组件与 Redux store 关联起来，并将 `dispatch` 函数注入到组件的 props 属性中。这...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值