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

需求:

在这里插入图片描述

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. 注意考虑对边界条件的处理。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zoe_ya

如果你成功申请,可以打赏杯奶茶

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值