React Antd Typescript开发碰到的问题 DatePicker Radio should update 后端数据回显

news2024/11/18 18:25:00

需求:

在这里插入图片描述

DatePicker控件
离职人员默认显示后端传过来的离职时间
有两种类型页面,编辑时可操作,详情时不可操作
进入编辑页面时,状态切换成在职时,清空离职时间框且离职时间框不可用,字段设置为 undefined
状态在职切换成离职时候,离职时间框可用,默认显示当天离职时间

尝试:

边界条件处理都加上了正常
使用 shouldUpdate 当在职状态改变时重新渲染离职时间框表单
在编辑时,切换至离职就是当前时间可编辑,切换至在职时就是 undefined 不能编辑

问题

已经离职的人员,在详情页,查看离职时间总是显示当天时间。
查看,发现后端传递的时间戳是对的,但是触发了 shouldUpdate,把字段设置成了当天。
为什么会触发 shouldUpdate,往前找,这个代码之前是别人写的,发现他给了这些表单 initialValue 中设为在职,
而离职人的字段是离职,这个就让状态改变了。此外,shuoldUpdate 的执行时机也要搞清楚。
在这里插入图片描述

解决:

把 initialValue 中设为在职先删除,检查后发现无影响,当时遗留问题不需要写这个初始化状态。

return (
    <Form.Item noStyle shouldUpdate={(pre, cur) => pre.xx !== cur.xx}>
      {(fm) => {
        // const isRequired = fm.getFieldValue('xx') === XXEnum.Online; ❎
        const isOnline = fm.getFieldValue('xx') === XXEnum.Online;
        return (
          <Form.Item
            label="离职时间"
            name="xxx"
            shouldUpdate={(pre, cur) => {
           //   if (pre.xx !== cur.xx) {   ❎
              if (pre.xx !== undefined && pre.xx !== cur.xx) {
                const curIsOnline = cur.xx === XXXEnum.Online;
                fm.setFieldsValue({
          //        xx: !isRequired ? undefined : moment(), ❎
                  xx: curIsOnline ? undefined : moment(),
                });
                return true;
              }
          >
            <DatePicker
              style={{ width: '200px' }}
       //       disabled={type === 'view' || isRequired} ❎
              disabled={type === 'view' || isOnline}
            />
          </Form.Item>
        );

总结:

  1. 首先注意 DatePicker 是毫秒级时间戳,如果和后端约定是以秒级时间戳传递,注意显示数据时要将原数据×1000.
  2. 注意 shouldUpdate 更新细节。
  3. 注意考虑对边界条件的处理。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/543454.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

国际top5功能完善在线投资平台app软件最新排名(综合评测)

如今&#xff0c;随着科技的发展&#xff0c;越来越多的人选择使用在线投资app软件来进行投资。但是面对众多的选择&#xff0c;选择一款靠谱的在线投资app软件是非常重要的。首先&#xff0c;我们需要考虑该软件的安全性。投资是一项涉及资金的活动&#xff0c;因此&#xff0…

高精度示波器keysight是德DSOS054、MSOS054销售回收

安捷伦Keysight DSOS054A MSOS054 500MHZ高清晰度示波器 特征&#xff1a; 带宽&#xff1a;500 MHz&#xff0c;具有平坦的频率响应&#xff0c;可实现高信号保真度 频道&#xff1a;4 最大存储深度&#xff1a;800 Mpts&#xff08;2 通道&#xff09;&#xff0c;400 Mpt…

新工匠精神是啥

给工匠精神加入新的“工程师”文化 工程化是现代制造的内核 工程师是工程文化的承载人 趣讲大白话&#xff1a;新工匠精神&#xff0c;新在哪里&#xff1f; 【趣讲信息科技170期】 **************************** 工程师文化起源于硅谷 传承工匠精神的&#xff0c;也要加入工程…

本科生高薪专业top10,全被计算机承包了

在每年被唱衰的行业里&#xff0c;即使如高薪神话的IT行业&#xff0c;也难逃此“劫”——IT不行了&#xff01;疲软了&#xff01;现在再入行IT和计算机就是坑&#xff01; 然而事实上&#xff0c;根据最新数据报告显示&#xff0c;2022届本科毕业生毕业半年后月收入排前10位的…

Linux|minio对象存储服务的部署和初步使用总结

前言&#xff1a; minio是一个非常轻量化的对象存储服务&#xff0c;是可以算到云原生领域的。 该服务是使用go语言编写的&#xff0c;因此&#xff0c;主文件就一个文件&#xff0c;它的下载&#xff0c;部署什么的都是非常简单的&#xff0c;一般两三步就可以搭建好了&…

Word控件Spire.Doc 【文本框】教程(6):如何在文本框中设置文本方向

Spire.Doc for .NET是一款专门对 Word 文档进行操作的 .NET 类库。在于帮助开发人员无需安装 Microsoft Word情况下&#xff0c;轻松快捷高效地创建、编辑、转换和打印 Microsoft Word 文档。拥有近10年专业开发经验Spire系列办公文档开发工具&#xff0c;专注于创建、编辑、转…

腾讯的这道公益「微光」,竟已燎原了

台上开发者们的陆续发言&#xff0c;瞬间把我带到了公益的海洋中。谁都不愿放弃追随那道光&#xff0c;那道热爱公益的光&#xff0c;那道为了解决弱势群体难题与时俱进的光&#xff0c;那道为了文化传承的创新之光。这就是第三届Light•技术公益创造营项目路演现场带给我的直观…

若依框架语言国际化操作流程?

国际化是指将产品、服务、企业或组织的活动适应不同国家、不同文化背景和不同语言环境的过程。它包括将产品或服务适应不同的市场需求、文化习惯和法律法规等方面的工作。国际化的目的是拓展企业或组织的市场,提高竞争力和盈利能力。 目录 一、前端国际化流程 1、html使用…

Gradle接入checkstyle代码风格检查插件

一、什么是checkstyle 在项目开发的过程中&#xff0c;代码规范是经常被提起的话题&#xff0c;特别是当项目需要多个开发协同完成的时候&#xff0c;良好统一的代码规范能够在一定程度上保证项目代码的质量和团队的开发效率。目前业界常见代码检查工具有 Alibaba Java Coding…

二分查找的总结

一、二分查找 1.思路分析 这道题目的前提是数组为有序数组&#xff0c;同时题目还强调数组中无重复元素&#xff0c;因为一旦有重复元素&#xff0c;使用二分查找法返回的元素下标可能不是唯一的&#xff0c;这些都是使用二分法的前提条件&#xff0c;当大家看到题目描述满足如…

Ampere Computing 发布全新 AmpereOne 系列处理器,192 个自研核

2023 年 5 月 19 日&#xff0c;中国北京——Ampere Computing 宣布推出全新 AmpereOne™ 系列处理器&#xff0c;该处理器拥有多达 192 个单线程 Ampere 核&#xff0c;内核数量为业界最高。这是第一款基于 Ampere 新自研核的产品&#xff0c;由 Ampere 自有 IP 全新打造。 致…

chatgpt赋能Python-python3_6怎么打开

Python 3.6&#xff1a;新时代的编程语言 Python 3.6是一种全新的编程语言版本&#xff0c;它提供了全新的功能和改进&#xff0c;使得编程过程更加简便且实用。无论你是编程新手还是老手&#xff0c;本文将教你如何打开Python 3.6&#xff0c;并带你了解Python 3.6的优点。 …

详解c++---多态

目录标题 为什么会有多态什么是虚函数的重写多态的定义特殊的重写重载&#xff0c;覆盖&#xff08;重写&#xff09;&#xff0c;隐藏&#xff08;重定义&#xff09;的对比final和override抽象类多态的原理验证虚表所在额度位置多继承的多态原理菱形虚拟继承多态的一些小点 为…

登录ChatGPT时提示Sorry, you have been blocked(对不起,您已被阻止)

问题描述 今天想使用ChatGPT&#xff0c;结果突然来了这么个问题&#xff0c;就问你吓不吓人&#xff1f;&#xff1f;&#xff1f;我以为我的账号被封了&#xff01; 原因分析 内容过滤&#xff1a;某些平台或网站可能使用内容过滤系统&#xff0c;该系统可能将AI语言模型视…

全文索引搜索引擎Zinc

什么是 Zinc &#xff1f; ZincSearch 是一个搜索引擎&#xff0c;可用于文本数据、日志、指标、事件等。它允许您进行全文搜索&#xff0c;包括将服务器日志发送到 ZincSearch、推送您的应用程序数据、提供全文搜索或在您的应用程序中构建搜索栏。具备与 Elasticsearch API 的…

Android WebView加载网页html文件显示加载进度

效果图如下&#xff1a; 一、视图绑定 通过视图绑定功能&#xff0c;您可以更轻松地编写可与视图交互的代码。在模块中启用视图绑定之后&#xff0c;系统会为该模块中的每个 XML 布局文件生成一个绑定类。绑定类的实例包含对在相应布局中具有 ID 的所有视图的直接引用。 在大…

Navicat 15中文安装教程

Navicat 15中文安装教程 附上百度网盘链接&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1OZNjcuEHnsZqBa9A-e_twQ 提取码&#xff1a;2phg 里面有两个版本&#xff0c;分别是64位和32位&#xff0c;大家可以根据自己的情况进行安装 下面是详细安装教程 1、选择安装包…

Sonar加入jenkins流水线

前提&#xff1a;已搭建sonarqube 1、配置sonarqube server jenkins 中manage jenkins-configure System配置sonarqube server 2、准备sonar环境 在jenkins项目的构建环境步骤中&#xff0c;勾选prepare SonarQube environment token需要提前在凭据里添加一个token 3、执行s…

ES6中flat与flatMap使用

1、方法介绍 数组的成员有时还是数组&#xff0c;Array.prototype.flat()用于将嵌套的数组“拉平”&#xff0c;变成一维的数组。该方法返回一个新数组&#xff0c;对原数据没有影响。 [1, 2, [3, 4]].flat() // [1, 2, 3, 4]上面代码中&#xff0c;原数组的成员里面有一个数…

InnoDB数据页结构

什么是页&#xff1f;什么是数据页&#xff1f; 页是InnoDB管理存储空间的基本单元&#xff0c;一个页的大小一般是16k。 InnoDB有许多不同的页&#xff0c;有存放表空间头部信息的页&#xff0c;INODE信息的页&#xff0c;当然还有存放我们记录信息的页&#xff0c;这个页叫…