记录一次排查 antd 组件的 bug

背景

一个页面里写了一个 Form 表单,Form 中有一个穿梭框以及一些其他组件,进入页面时穿梭框外面包裹一层 Spin 组件 loading 状态,等穿梭框里的值发送的请求结果接收后 loading 取消,最下面有个 button 来调用 Form 的 onFinish 方法

大概长这样

代码缩略如下

tsx 复制代码
import { useState } from 'react'
import { Button, Form, Spin, Transfer } from 'antd'
import { useMount } from 'ahooks'

const profile = () => {
  const [loading, setLoading] = useState(true)
  const [msg, setMsg] = useState('尚未提交')
  const [targetKeys, setTargetKeys] = useState<string[]>([])
  const [mockData, setMockData] = useState([
    { title: '123', key: 'a' },
    { title: '456', key: 'b' },
    { title: '789', key: 'c' }
  ])

  useMount(() => {
    setTimeout(() => {
      setLoading(false)
    }, 2000)
  })

  const handleChange = (newTargetKeys: string[]) => {
    setTargetKeys(newTargetKeys)
  }

  const click = () => {
    setMsg('提交成功')
  }

  return (
    <>
      <Form onFinish={click}>
        <Form.Item name="val" rules={[{ required: true, message: '请选择' }]}>
          <Spin spinning={loading}>
            <Transfer
              showSearch
              dataSource={mockData}
              targetKeys={targetKeys}
              onChange={handleChange}
              render={item => item.title}
            />
          </Spin>
        </Form.Item>
        <Button htmlType="submit">提交</Button>
        <div>{msg}</div>
      </Form>
    </>
  )
}

export default profile

为穿梭框设置rule位required,即提交时为必选,没有值会报错

每次进入页面时用settimout模拟请求接口两秒后取消loading

报错

此时我们把值传到右边,点击button提交,发现明明穿梭框这里是有值的,还会给我们报错提示

把所有的值全都传过来,点击button依旧是报错

此时我是百思不得其解,明明此时的穿梭框是拿到值的,这里去打印一下targetKey也是拿到了值的,为什么还会给我报错呢

解决?

此时我就开始想了,应该是 antd 组件的 bug,这里的穿梭框组件有搜索框,所以实际上是两个组件,搜索框和穿梭框的组合组件,而Form 校验的时候也会把搜索框的值进行校验,此时我们只选择了穿梭框的值 但是搜索框是没有值的,所以这里会有一个报错提醒。

这么一顿思考完,我真是个天才,这种bug都能让我想通。然后就去想了下解决方案,把穿梭框从 Form 中拿出来,在点击 button 的时候判断下,穿梭框有值就正常进行,没值的时候在下面写一个相同样式的文字提示。

真正的问题所在

这么想完,这不直接搞定了,但是组里的其他大佬一眼就发现了端倪。

这里根本的问题是,被Form.Item包裹的组件会被自动的添加value属性和onChange方法,数据被Form来接管,此处可以看antd文档

而我们这里被Form.Item所包裹的第一层组件是一个Spin,它并没有对应的value和onChange,所以Form这里所劫持的数据并不是穿梭框里值,根本就取不到值,所以这就解释了为什么我们明明把值传过去了却点击button时还是会有提示警告。

而解决方案非常简单,只需要把Spin组件包裹在Form.Item外面,让Form.Item直接拿到穿梭框的value和onChange,此时我们再去点击button,就不会有报错提示了,可以看到点击后的文字显示未提交成功。

总结

可能有些大佬或者之前了解的会觉得非常简单的一个事,但是对于不了解这个问题的小白来讲是很难解决的一个问题,这个排查过程也非常有收获,本文主要在于记录一下整个过程,以及向还不清楚的人普及一下

本文同步发在个人网站

欢迎指正

相关推荐
Json_181790144801 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆2 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China2 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q2 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海2 小时前
Chrome离线安装包下载
前端·chrome
m51272 小时前
LinuxC语言
java·服务器·前端