记录一次排查 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,就不会有报错提示了,可以看到点击后的文字显示未提交成功。

总结

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

本文同步发在个人网站

欢迎指正

相关推荐
cs_dn_Jie26 分钟前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic1 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿1 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具2 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161772 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test3 小时前
js下载excel示例demo
前端·javascript·excel
Yaml43 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事3 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶3 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo3 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx