关于react在componentDidMount中请求之后的数据无法更新表单的问题

最新推荐文章于 2024-07-04 14:00:47 发布
最新推荐文章于 2024-07-04 14:00:47 发布
阅读量3.8k 收藏 2
点赞数 1
分类专栏： React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenqk_123/article/details/103202083
版权

我们知道componentDidMount会在render函数执行之后即组件渲染之后执行。那么需要去后台准备数据的时候比如说获取list列表时，会在componentDidMount中去后台请求数据，然后更新到表单中。

但是在做react项目时，碰到配置项的模块(只有一个配置页面，没有list页面以及增删页面)，会出现问题。

配置项一般会去检查输入的合法与否，所以我们一般会采用antd的form表单去做。需要通过this.state.item去绑定初始值，当页面渲染之后，调用componentDidMount时，请求返回数据再去更新数据就会出现数据更新不了的情况。

所以一般碰到这种问题，我们都会使用一个标志位来控制render函数的渲染，只有当componentDidMount中的请求返回时，我们才去设置标志位，去渲染form表单这就跟初始化一样。

比如：

在项目初始化的时候，我会在页面设置一些默认值

constructor(props) {
        super(props);
        this.state = {
            periodUnit: "Hour(s)",
            rememberDevice: true,
            expireFlag: 0,
            deviceValidityPeriod: 30,
            maxDeviceNumberPerAccount: 5,
            deviceMin: 1,
            deviceMax: 365,
            maxDeviceNumberPerAccountMin: 1,
            maxDeviceNumberPerAccountMax: 10,
            periodUnitArry: ["Day(s)", "Hour(s)", "Minute(s)"],
            loadding: false
        }
    }

我们知道，constructor是在组件生成的时候首先回去执行的函数，它肯定是在render之前，这么设置数据显示也是没有问题的。

<Form {...formItemLayout} labelAlign="right">
                                <Collapse accordion expandIconPosition="right" defaultActiveKey={['2']} className="samp_collapse_style">
                                    <Panel header={intl.get("samp.byodManagement.byodGlobalConfiguration.panel.registrationStrategy")} key="2" className="samp_collapse_panel_header">
                                        <Form.Item label={intl.get("samp.byodManagement.byodGlobalConfiguration.item.periodUnit")} validateStatus={periodUnitError ? 'error' : ''} help={periodUnitError || ''}>
                                            {getFieldDecorator('periodUnit', { initialValue: this.state.periodUnit, rules: rules.periodUnit })(
                                                <Select
                                                    onChange={this.changePeriodUnit}
                                                    placeholder={intl.get("samp.common.pleaseSelect")}
                                                >
                                                    {
                                                        this.state.periodUnitArry && this.state.periodUnitArry.map((item) => {
                                                            return <Option value={item} key={item}>{item}</Option>
                                                        })
                                                    }
                                                </Select>)}
                                        </Form.Item>
                                        <Form.Item label={intl.get("samp.byodManagement.byodGlobalConfiguration.item.rememberDevice")} validateStatus={rememberDeviceError ? 'error' : ''} help={rememberDeviceError || ''}>
                                            {getFieldDecorator('rememberDevice', { initialValue: this.state.rememberDevice, rules: rules.rememberDevice })(
                                                <Switch checkedChildren="Enabled" unCheckedChildren="Disabled" defaultChecked onChange={this.changeRememberDevice} />
                                            )}
                                        </Form.Item>
                                        {
                                            this.state.rememberDevice ?
                                                <div>
                                                    <Form.Item label={intl.get("samp.byodManagement.byodGlobalConfiguration.item.expireFlag")} hasFeedback validateStatus={expireFlagError ? 'error' : ''} help={expireFlagError || ''}>
                                                        {getFieldDecorator('expireFlag', { initialValue: this.state.expireFlag, rules: rules.expireFlag })(
                                                            <Radio.Group style={{ float: "left" }} onChange={this.changeExpireFlag}>
                                                                <Radio value={-1}>{intl.get("samp.byodManagement.byodGlobalConfiguration.item.neverExpire")}</Radio>
                                                                <Radio value={0}>{intl.get("samp.byodManagement.byodGlobalConfiguration.item.customization")}</Radio>
                                                            </Radio.Group>
                                                        )}
                                                    </Form.Item>
                                                    {
                                                        this.state.expireFlag === 0 ?
                                                            <div>
                                                                <Form.Item label={intl.get("samp.byodManagement.byodGlobalConfiguration.item.deviceValidityPeriod")} hasFeedback validateStatus={deviceValidityPeriodError ? 'error' : ''} help={deviceValidityPeriodError || ''}>
                                                                    {getFieldDecorator('deviceValidityPeriod', { initialValue: this.state.deviceValidityPeriod, rules: rules.deviceValidityPeriod })(
                                                                        <InputNumber style={{ width: "100%" }} min={this.state.deviceMin} max={this.state.deviceMax} />
                                                                    )}
                                                                </Form.Item>
                                                                <Form.Item label={
                                                                    <span>
                                                                        <Tooltip title={intl.get("samp.byodManagement.byodGlobalConfiguration.tips.maxDeviceNumberPerAccount")}>
                                                                            <Icon type="question-circle-o" />
                                                                        </Tooltip> {intl.get("samp.byodManagement.byodGlobalConfiguration.item.maxDeviceNumberPerAccount")}
                                                                    </span>} hasFeedback validateStatus={maxDeviceNumberPerAccountError ? 'error' : ''} help={maxDeviceNumberPerAccountError || ''}>
                                                                    {getFieldDecorator('maxDeviceNumberPerAccount', { initialValue: this.state.maxDeviceNumberPerAccount, rules: rules.maxDeviceNumberPerAccount })(
                                                                        <InputNumber style={{ width: "100%" }} min={this.state.maxDeviceNumberPerAccountMin} max={this.state.maxDeviceNumberPerAccountMax} />
                                                                    )}
                                                                </Form.Item>
                                                            </div> : ""
                                                    }
                                                </div> : ""
                                        }
                                    </Panel>
                                </Collapse>
                                <div className="samp_panel_from_footer">
                                    <div className="samp_panel_from_footer_button">
                                        <Button type="primary" onClick={this.apply} htmlType="submit" disabled={hasErrors(getFieldsError())} disabled={hasErrors(getFieldsError())}>
                                            {intl.get("samp.button.apply")}
                                        </Button>
                                        <Button type="primary" onClick={this.cancel} className="samp_panel_from_footer_button_cancle">{intl.get("samp.button.cancel")}</Button>
                                    </div>
                                </div>
                            </Form>

这里通过initialValue去绑定state中的属性。

然后会在

componentDidMount() {
        // 对于隐藏域的校验，目前还存在问题，先实现功能，后期优化打开初始化校验
        this.props.form.validateFields();
        this.getGlobalConfiguration()

    }

获取配置之后会去setState属性

 //获取global配置
    getGlobalConfiguration = () => {
      
        byodGlobalConfigurationService.getConfiguration().then((response) => {
            console.log(response.data[0])
            this.setState({
                // periodUnit: response.data[0].periodUnit,
                periodUnit: "Hour(s)",
                expireFlag: response.data[0].expireFlag,
                deviceValidityPeriod: response.data[0].deviceValidityPeriod,
                maxDeviceNumberPerAccount: response.data[0].maxDeviceNumberPerAccount
            })
            response.data[0].rememberDevice === "Enabled" ? this.setState({ rememberDevice: true }) : this.setState({ rememberDevice: false })
            
        })
    }

其实设置时不会生效的。

那么怎么处理呢？

增加一个标志位loadding，初始值为false，那么在这里就不会去渲染form

{
                        this.state.loadding ?
                            <Form {...formItemLayout} labelAlign="right">
                                <Collapse accordion expandIconPosition="right" defaultActiveKey={['2']} className="samp_collapse_style">
                                    <Panel header={intl.get("samp.byodManagement.byodGlobalConfiguration.panel.registrationStrategy")} key="2" className="samp_collapse_panel_header">
                                        <Form.Item label={intl.get("samp.byodManagement.byodGlobalConfiguration.item.periodUnit")} validateStatus={periodUnitError ? 'error' : ''} help={periodUnitError || ''}>
                                            {getFieldDecorator('periodUnit', { initialValue: this.state.periodUnit, rules: rules.periodUnit })(
                                                <Select
                                                    onChange={this.changePeriodUnit}
                                                    placeholder={intl.get("samp.common.pleaseSelect")}
                                                >
                                                    {
                                                        this.state.periodUnitArry && this.state.periodUnitArry.map((item) => {
                                                            return <Option value={item} key={item}>{item}</Option>
                                                        })
                                                    }
                                                </Select>)}
                                        </Form.Item>
                                        <Form.Item label={intl.get("samp.byodManagement.byodGlobalConfiguration.item.rememberDevice")} validateStatus={rememberDeviceError ? 'error' : ''} help={rememberDeviceError || ''}>
                                            {getFieldDecorator('rememberDevice', { initialValue: this.state.rememberDevice, rules: rules.rememberDevice })(
                                                <Switch checkedChildren="Enabled" unCheckedChildren="Disabled" defaultChecked onChange={this.changeRememberDevice} />
                                            )}
                                        </Form.Item>
                                        {
                                            this.state.rememberDevice ?
                                                <div>
                                                    <Form.Item label={intl.get("samp.byodManagement.byodGlobalConfiguration.item.expireFlag")} hasFeedback validateStatus={expireFlagError ? 'error' : ''} help={expireFlagError || ''}>
                                                        {getFieldDecorator('expireFlag', { initialValue: this.state.expireFlag, rules: rules.expireFlag })(
                                                            <Radio.Group style={{ float: "left" }} onChange={this.changeExpireFlag}>
                                                                <Radio value={-1}>{intl.get("samp.byodManagement.byodGlobalConfiguration.item.neverExpire")}</Radio>
                                                                <Radio value={0}>{intl.get("samp.byodManagement.byodGlobalConfiguration.item.customization")}</Radio>
                                                            </Radio.Group>
                                                        )}
                                                    </Form.Item>
                                                    {
                                                        this.state.expireFlag === 0 ?
                                                            <div>
                                                                <Form.Item label={intl.get("samp.byodManagement.byodGlobalConfiguration.item.deviceValidityPeriod")} hasFeedback validateStatus={deviceValidityPeriodError ? 'error' : ''} help={deviceValidityPeriodError || ''}>
                                                                    {getFieldDecorator('deviceValidityPeriod', { initialValue: this.state.deviceValidityPeriod, rules: rules.deviceValidityPeriod })(
                                                                        <InputNumber style={{ width: "100%" }} min={this.state.deviceMin} max={this.state.deviceMax} />
                                                                    )}
                                                                </Form.Item>
                                                                <Form.Item label={
                                                                    <span>
                                                                        <Tooltip title={intl.get("samp.byodManagement.byodGlobalConfiguration.tips.maxDeviceNumberPerAccount")}>
                                                                            <Icon type="question-circle-o" />
                                                                        </Tooltip> {intl.get("samp.byodManagement.byodGlobalConfiguration.item.maxDeviceNumberPerAccount")}
                                                                    </span>} hasFeedback validateStatus={maxDeviceNumberPerAccountError ? 'error' : ''} help={maxDeviceNumberPerAccountError || ''}>
                                                                    {getFieldDecorator('maxDeviceNumberPerAccount', { initialValue: this.state.maxDeviceNumberPerAccount, rules: rules.maxDeviceNumberPerAccount })(
                                                                        <InputNumber style={{ width: "100%" }} min={this.state.maxDeviceNumberPerAccountMin} max={this.state.maxDeviceNumberPerAccountMax} />
                                                                    )}
                                                                </Form.Item>
                                                            </div> : ""
                                                    }
                                                </div> : ""
                                        }
                                    </Panel>
                                </Collapse>
                                <div className="samp_panel_from_footer">
                                    <div className="samp_panel_from_footer_button">
                                        <Button type="primary" onClick={this.apply} htmlType="submit" disabled={hasErrors(getFieldsError())} disabled={hasErrors(getFieldsError())}>
                                            {intl.get("samp.button.apply")}
                                        </Button>
                                        <Button type="primary" onClick={this.cancel} className="samp_panel_from_footer_button_cancle">{intl.get("samp.button.cancel")}</Button>
                                    </div>
                                </div>
                            </Form> : ""
                    }

当请求数据回来的时候设置setState之后在将loadding值设置为true，由于state发生变化，回去重新渲染

//获取global配置
    getGlobalConfiguration = () => {
        this.setState({
            loadding: false
        })
        byodGlobalConfigurationService.getConfiguration().then((response) => {
            console.log(response.data[0])
            this.setState({
                // periodUnit: response.data[0].periodUnit,
                periodUnit: "Hour(s)",
                expireFlag: response.data[0].expireFlag,
                deviceValidityPeriod: response.data[0].deviceValidityPeriod,
                maxDeviceNumberPerAccount: response.data[0].maxDeviceNumberPerAccount
            })
            response.data[0].rememberDevice === "Enabled" ? this.setState({ rememberDevice: true }) : this.setState({ rememberDevice: false })
            this.setState({
                loadding: true
            })
        })
    }

这样就可以显示设置之后的值

逆风飞翔的猿
关注
专栏目录
React-setState执行过程(为什么不会同步更新组件)
LYFlied的博客
03-31 1642
setState 不会立刻改变React组件中state的值. - setState 通过触发一次组件的更新来引发“重绘”. - 多次 setState 函数调用产生的效果会合并。 一、setState 为什么不会同步更新组件？ 二、setState执行过程,流程图 分场景讨论 1.钩子函数和合成事件中 2.异步函数和原生事件中 3.componentDidMount调用setstate 4.componentWillUpdate componentDidUpdate 5.事件处理类型 6.传入的是函数
react 渲染前请求ajax,react之异步请求数据，render先行渲染报错，未拿到数据
weixin_32349223的博客
08-05 1995
import React from 'react'import {connect} from 'react-redux'import { Redirect} from 'react-router-dom'import axios from 'axios'import {login} from './Auth.redux.js'//两个reducers 每个reducers都有一个state@con...
React数据获取为什么一定要在componentDidMount里面调用？
mym940725的博客
12-12 1万+
转载自：https://segmentfault.com/q/1010000008133309/a-1020000008135702 这与React组件的生命周期有关，组件挂载时有关的生命周期有以下几个: constructor() componentWillMount() render() componentDidMount() 上面这些方法的调用是有次序
React 中的“重新渲染”和“组件初次挂载”的区别
最新发布
十步杀一人-千里不留行
07-04 307
初次挂载：当组件第一次被渲染到页面上时（如打开一个包含这个组件的页面），会触发useEffect中的 API 调用。重新渲染：当组件的状态或属性发生变化时，组件会重新渲染，但由于useEffect依赖数组为空，API 不会再次被调用。通过在useEffect中调用 API 并传入空依赖数组，确保 API 调用只在组件初次挂载时执行一次，从而避免不必要的重复请求。
redux在componentDidMount中出现的问题 --- state 不变
weixin_33696822的博客
07-31 1435
　　遇到这样一个问题： 　　　　在组件的componentDidMount中，我需要使用到redux中存储的某个状态。  　　　　但是有趣的是，当我再render中使用相同的状态时，状态会改变，但是在conponentDidMount中使用却不会改变。  　　　　stackoverflow上有很好的解释：　https://stackoverflow.com/questions/3396024...
react ComponentDidMount与render的顺序
大赚万万亿
07-06 2187
react生命周期
React 之 state 数据改变页面不更新未重新渲染的 7 种情况 及 解决办法
热门推荐
前端一线搬运工的博客
04-02 5万+
1. 在redux中修改state页面未更新 解决办法: 请检查你的state是不是直接改变原state的, 记住不要直接修改state 原因: reducer 中 state 是引用,在 reducer 中改变 state 是错误的, 虽然 store 里面的 state 是改变了,但是 react - redux 会认为dispatch 前后的 state 没有改变，就不会重新渲染页...
react 使用ajax axios,react中使用Ajax请求（axios，Fetch）
weixin_42515841的博客
08-06 1288
React本身只关注于界面, 并不包含发送ajax请求的代码，前端应用需要通过ajax请求与后台进行交互(json数据)，可以使用集成第三方ajax库(或自己封装)常用的ajax请求库jQuery: 比较重, 如果需要另外引入不建议使用axios: 轻量级, 建议使用，封装XmlHttpRequest对象的ajax，promise风格，可以用在浏览器端和node服务器端fetch: 原生函数, 但...
react + antdesign入门(二) 编辑表格数据,将数据回显到表单内
weixin_44514665的博客
02-11 3286
111
React中的数据请求与管理
在React项目中，数据请求是非常重要的一环，因为前端应用通常需要与后端进行数据交互，包括展示远程数据、提交表单、获取用户信息等。 #### 1.3 数据请求的流程与原理 数据请求的流程包括构造请求、发送请求、处理...
react usestate 更新_React中setState同步更新策略
weixin_33585822的博客
12-29 3788
setState 同步更新我们在上文中提及，为了提高性能React将setState设置为批次更新，即是异步操作函数，并不能以顺序控制流的方式设置某些事件，我们也不能依赖于this.state来计算未来状态。典型的譬如我们希望在从服务端抓取数据并且渲染到界面之后，再隐藏加载进度条或者外部加载提示：componentDidMount() {fetch('https://example.com').t...
react
weixin_44270312的博客
07-23 93
Node导入模块和导出模块 //加载模块 require '模块标识符' require '文件路径' //向外暴露成员的形式 module.exports = {} exports.xxx = xxx ES6导入模块和导出模块 //加载模块 import 模块名称 from '模块标识符' //如import Vue from 'vue' import '表示路径' ...
React生命周期方法之 componentDidMount
star_zone的博客
03-22 3万+
1. componentDidMount() 这个生命周期方法应该是用的最多的，一般用在进入页面后，数据初始化，这种情况下，跟model中的subscription方法作用是一样的。但是当你数据初始化方法都写在subscription方法时，当你改了页面访问路径，model里面的path没改过来，初始化方法就调不到了。但是要是把数据初始化接口都放在componentDidMount函数里，只要进...
React组件的DidMount事件里的setState事件
weixin_33940102的博客
01-12 1703
参考原文： React 源码剖析系列 － 解密 setState setState 之后发生了什么 —— 浅谈 React 中的 Transaction 无法多次setState React组件的componentDidMount事件里使用setState方法，会有一些有趣的事情： class Example extends React.Component { construct...
React组件：为什么调用顺序是constructor -> willMount -> render -> DidMount
weixin_33774615的博客
11-20 1503
虽然常用React、redux编写SPA，但是这一块是如何运作，应该如何优化，还是比较困扰，最近开始阅读程墨的《深入浅出React和Redux》，结合之前读过的React源码和相关源码的文章后，打算从源码的角度，解释下书中的一些内容。 前言书中有一段话，关于组件从初始化到挂载经过的声明周期：流程： 1、constructor 2、componentWillMount 3、render 4、com...
React 之 render props 的理解
weixin_30466421的博客
06-11 221
1.基本概念 在调用组件时，引入一个函数类型的 prop，这个 prop定义了组件的渲染方式。 2.回调渲染 回顾组件通信的几种方式 父-> 子 props 子-> 父 回调、消息通道 任意 状态提升、Context、Redux 等 而 render props 本质实际上是使用到了回调的方式来通信。只不过在传统的 js 回调是在构造函数中进行初始化（使用回...
【antd】根据后台数据动态生成表单和数据更新
idwtwt的专栏
12-16 1万+
具体需求是： 1 根据后台数据动态生成表单项 2 表单项可以编辑和增减，提交保存数据到后台 大概界面如下： 对于需求1，找了下基本通过map枚举，配合getFieldDecorator 对于需求2，如果编辑过程中，增减表单项，将造成正在编辑的表单数据丢失的情况，如下： 没找到完整的解决方案，自己摸索了下，通过onValuesChange监听所有表单改动，更新state来保存实时...
React系统学习5（组件生命周期）
程序员涂小哥的技术博客
04-25 534
在之前的React类式组件定义的时候，有说到有一个必不可少的内容，即render函数，这个函数是React自带的，每当组件的状态变化的时候，就会触发一次render。 render函数就是React生命周期中的一个，与之类似的这些函数通常被称作React生命周期函数、React生命周期钩子函数、React生命周期钩子、React生命周期回调函数。 这些函数包括constructor、componentWillMount、render、componentDidMount、componentWillUnmoun
【React生命周期】
qlee123的博客
08-31 266
react 生命周期
怎么使用ajax请求把react前端输入的表单数据传到后端数据库中
04-29
首先，在React中，你需要使用 `axios` 或者 `fetch` 等库来发起 AJAX 请求。 1. 安装 `axios` 库 在终端中运行以下命令来安装 `axios` 库： ``` npm install axios ``` 2. 发起 AJAX 请求 在 React 组件中，你可以在表单提交时发起 AJAX 请求。例如： ```jsx import React, { useState } from 'react'; import axios from 'axios'; function Form() { const [formData, setFormData] = useState({ name: '', email: '', message: '' }); const handleSubmit = async (e) => { e.preventDefault(); try { const response = await axios.post('/api/contact', formData); console.log(response.data); } catch (err) { console.error(err); } } const handleChange = (e) => { setFormData({ ...formData, [e.target.name]: e.target.value }); } return ( <form onSubmit={handleSubmit}> <div> <label htmlFor="name">Name:</label> <input type="text" name="name" id="name" value={formData.name} onChange={handleChange} /> </div> <div> <label htmlFor="email">Email:</label> <input type="email" name="email" id="email" value={formData.email} onChange={handleChange} /> </div> <div> <label htmlFor="message">Message:</label> <textarea name="message" id="message" value={formData.message} onChange={handleChange}></textarea> </div> <button type="submit">Submit</button> </form> ); } export default Form; ``` 这里我们定义了一个表单组件，其中包含 `name`，`email` 和 `message` 三个表单项。在 `handleSubmit` 函数中，我们使用 `axios.post` 发起 POST 请求，将表单数据作为请求体传递给后端 `/api/contact` 接口。如果请求成功，我们在控制台中打印服务器返回的数据。 3. 处理后端请求 在后端中，你需要使用一个路由处理 POST 请求，并将表单数据存储到数据库中。例如，如果你使用 Node.js 和 Express 构建后端，可以使用以下代码： ```javascript const express = require('express'); const bodyParser = require('body-parser'); const app = express(); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); app.post('/api/contact', (req, res) => { const { name, email, message } = req.body; // 这里可以连接数据库，将表单数据存储到数据库中 // ... res.status(200).json({ success: true }); }); app.listen(3000, () => console.log('Server is running on port 3000')); ``` 这里我们使用 `body-parser` 中间件来解析请求体中的 JSON 数据。在 `/api/contact` 路由中，我们从请求体中获取表单数据，并将其存储到数据库中。如果存储成功，我们返回一个包含 `success: true` 的 JSON 响应。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值