背景
一个页面里写了一个 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,就不会有报错提示了,可以看到点击后的文字显示未提交成功。
总结
可能有些大佬或者之前了解的会觉得非常简单的一个事,但是对于不了解这个问题的小白来讲是很难解决的一个问题,这个排查过程也非常有收获,本文主要在于记录一下整个过程,以及向还不清楚的人普及一下
本文同步发在个人网站
欢迎指正