React antd 日期选择控件踩坑 <DatePicker> Table Ant Design ProTable

news2024/9/27 19:26:35

背景

需求:一个带日期的字段
后端接口给值时默认设置为这个日期值
在这里插入图片描述

不给值时就是默认状态
在这里插入图片描述

<DatePicker defaultValue={val} onChange={handleChange} {...props} />

这里 val 是我最终从后端获取到的日期数据
可能有值可能没有值
按照官方 API 和 demo 写 应该是上面那样

问题

但是这样写发现无论后端接口在该字段有没有值
DatePicker 控件都是请选择日期的样式(没有值时的状态)
修改 搜索 看别人代码 终于解决

解决方法

把 defaultValue 换成 value 即可

注意

  • 此外,DatePicker 传的值必须是 moment.js 格式或者 day.js 这两个日期库的格式

其他踩的坑

  • ProTable
    • 如果使用 request 获取值,request对于返回的数据格式有要求比如 data, total, success字段,如果没有,页面就没有数据
    • rowKey:一定要写的属性(不写会报错)
    • Uncaught TypeError: rawData.some is not a function at Table.js:101
      数据源不是数组 看 data 字段
    • 一些情况下的 ProTable 表格用 initialValue 也会出现页面更新值的问题

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

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

相关文章

实验四 微程序控制器实验报告

我班算是几乎最后一个做实验的班级了&#xff0c;报告参考了一些朋友提供的数据加上一些自己的主观拙见&#xff0c;本人水平有限加之制作仓促难免有错误&#xff0c;望大家批评指正。 4.1 微程序控制器实验 一、实验目的 (1) 掌握微程序控制器的组成原理。 (2) 掌握微程…

springboot实习管理系统的设计与实现

摘 要 随着信息化时代的到来&#xff0c;管理系统都趋向于智能化、系统化&#xff0c;实习管理也不例外&#xff0c;但目前国内仍都使用人工管理&#xff0c;市场规模越来越大&#xff0c;同时信息量也越来越庞大&#xff0c;人工管理显然已无法应对时代的变化&#xff0c;而实…

一键免费部署你的私人 ChatGPT 网页应用-ChatGPT Next Web

ChatGPT-Next-Web是一款基于GPT-3.5的在线聊天机器人应用程序。它可以自动回复用户输入的消息&#xff0c;并提供有用的信息和服务。该应用程序使用了最先进的自然语言处理技术和GPT-3.5模型&#xff0c;可以生成自然流畅的文本&#xff0c;并提供准确和个性化的回复。 项目地…

(浙大陈越版)数据结构 第二章 线性结构 2.3 队列

目录 2.3.1 队列及顺序存储实现 什么是队列 概念&#xff1a; 特性&#xff1a; 队列的抽象数据类型描述 队列的顺序存储实现 解决方案&#xff1a; 2.3.2 队列的链式存储实现 2.3.1 队列及顺序存储实现 什么是队列 概念&#xff1a; 和堆栈一样&#xff0c;是一种受…

黑马点评项目导入

文章目录 开篇导读项目地址导入SQL项目架构介绍后端项目导入前端项目导入 开篇导读 亲爱的小伙伴们大家好&#xff0c;马上咱们就开始实战篇的内容了&#xff0c;相信通过本章的学习&#xff0c;小伙伴们就能理解各种redis的使用啦&#xff0c;接下来咱们来一起看看实战篇我们…

刚刚!BingChat全面开放,人人可用!

大家好&#xff0c;我是鸟哥。 如题&#xff0c;微软真是下血本。昨天毫无征兆的宣布BingChat全面开放&#xff0c;人人可用&#xff01;众所周知ChatGPT得使用门槛有多高&#xff0c;而BingChat底层调用的是GPT4.0的模型&#xff0c;这无疑是白嫖GPT4.0最简单的姿势了。鸟哥一…

阿里云服务器镜像怎么选?操作系统版本选择说明

阿里云服务器镜像怎么选择&#xff1f;云服务器操作系统镜像分为Linux和Windows两大类&#xff0c;Linux可以选择Alibaba Cloud Linux&#xff0c;Windows可以选择Windows Server 2022数据中心版64位中文版&#xff0c;阿里云百科来详细说下阿里云服务器操作系统有哪些&#xf…

【移动端网页布局】flex 弹性布局 ④ ( 设置子元素是否换行 | flex-wrap 样式说明 | 代码示例 )

文章目录 一、设置子元素是否换行 : flex-wrap 样式说明1、flex-wrap 样式引入2、flex-wrap 样式取值说明 二、代码示例1、代码示例 : 默认情况下 flex 弹性布局子元素不会自动换行2、代码示例 : 自动换行 一、设置子元素是否换行 : flex-wrap 样式说明 1、flex-wrap 样式引入 …

统计字符串字符出现的次数

输入一个字符串&#xff0c;输出字符及相应字符出现的次数。 【学习的细节是欢悦的历程】 Python 官网&#xff1a;https://www.python.org/ Free&#xff1a;大咖免费“圣经”教程《 python 完全自学教程》&#xff0c;不仅仅是基础那么简单…… 地址&#xff1a;https://lqp…

navicat连接云服务器mysql教程

包含navicat报错解决&#xff01; 文章目录 1 点击连接后填写相关内容2 报错解决2.1 1130 - Host XXX is not allowed to connect to this MySQL server。2.2 服务器未开启mysql端口通道 1 点击连接后填写相关内容 主机名或ip地址&#xff1a;填写服务器公网ip 用户名和密码&a…

GitHub使用(1):杂项

目录 1. ubuntu推送到github鉴权失败2. 分支重命名3. 指令升级删除分支推送到远程仓库 1. ubuntu推送到github鉴权失败 翻译下就是 remote&#xff1a;2021 年 8 月 13 日删除了对密码身份验证的支持。 远程&#xff1a;有关当前推荐的身份验证模式的信息&#xff0c;请参阅 ht…

开会记录【NiFi数据集成、AllData数据中台管理系统、RuoYi】

今天上午和下午开了个小会&#xff0c;上午说了一下Nifi&#xff0c;下午具体说了一下nifi和ruoyi。 目录 上午 下午 上午 三个人开会。 上次说的挖掘平台&#xff0c;您这边是否有技术人员对nifi比较熟悉&#xff0c;并且能够将相关功能集成到数据中台系统中。 现在结构化的…

LeetCode---回溯算法中的子集问题

78. 子集 给你一个整数数组 nums &#xff0c;数组中的元素 互不相同 。返回该数组所有可能的子集&#xff08;幂集&#xff09;。 解集 不能 包含重复的子集。你可以按 任意顺序 返回解集。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3] 输出&#xff1a;[[],[1],[2]…

浅谈“孔乙己”的长衫

书中的孔乙己 孔乙已是鲁迅笔下人物&#xff0c;穷困流倒还穿着象征读书人的长衫&#xff0c;迁腐、麻木。最近&#xff0c;大家自我调佩是“当代孔乙己”&#xff0c;学历成为思想负担&#xff0c;找工作时高不成低不就。 当代的“孔乙己” 如今社会&#xff0c;从小学开始每…

【DP】学习之背包问题

01背包 2. 01背包问题 - AcWing题库 记忆化搜索 #include<bits/stdc.h> using namespace std; const int N1e310; int n,m; int v[N],w[N]; int res; int mem[N][N]; int dfs(int x,int spv) {if(mem[x][spv]) return mem[x][spv];if(x>n) return mem[x][spv]0;if…

国内免费使用gpt-4-如何接入ChatGPT4

如何用上gpt-4 GPT-4尚未正式发布和公开&#xff0c;因此我们无法提供对GPT-4的具体使用方法。但是&#xff0c;可以从GPT-4的前一代——GPT-3的使用经验和GPT-4的预期功能来看&#xff0c;建议如下&#xff1a; 了解GPT-4的语言处理能力和适用场景&#xff1a;GPT-4预计将进一…

项目实现读写分离操作(mysql)

读写分离 1.问题说明 2.读写分离 Master&#xff08;主库&#xff09;----(数据同步)—> Slave&#xff08;从库&#xff09; Mysql主从复制 mysql主从复制 介绍 mysql主从复制是一个异步的复制过程&#xff0c;底层是基于mysql数据库自带的二进制日志功能。就是一台或多台…

【C语言】数组讲解

【C语言】数组讲解 1.一维数组的创建和初始化1.1一维数组的创建1.2一维数组的初始化1.3一维数组的使用1.4一维数组在内存中的存储 2.二维数组的创建和初始化2.1二维数组的创建2.2二维数组的初始化2.3二维数组的使用2.4一维数组在内存中的存储 3.数组越界4.数组作为函数参数4.1冒…

Mysql第四章 分库分表,读写分离,主从架构

这里写自定义目录标题 一 分库分表1 为什么要分库分表2 分库分表的几种方式2.1 垂直拆分2.1.1 表的垂直拆分2.1.2库的垂直拆分2.1.2 垂直拆分的特点 2.2 水平拆分2.2.1 表的水平拆分2.2.2 库的水平拆分2.2.3 水平拆分的特点 3 分库分表的技术选型3.1 JDBC直连层3.2 proxy代理层…

RocketMQ安装以及源码启动

RocketMQ是一款消息中间件&#xff0c;在我们项目中主要是使用它来进行异步处理业务以及进行解耦&#xff0c;当然还可以用它实现其他业务需求比如流削峰等等&#xff0c;它提供的功能特别多&#xff0c;比如延迟消费、定时消费、消息重试、顺序消费等等。它的整体设计是追求简…