antd表单设置默认值和react hook 保存值无效的问题

表单设置默认值

有这样的需求 我开启优惠 价格需要禁用然后价格里面输入框的值全部清空
之前一直用这个form.setFieldsValue({})来设置表单的默认值,现在我的Form.Item不是单一的字符串name,
而是数组的形式,如果这样我们要改那一列的值 就需要用到form.setFields([{name: [name, index, "price"], value:null}])来修改,

image.png
  {
            title: '是否开启优惠',
            render: (text, record, index) => {
                return <Form.Item name={[name, index, "effectValue"]} style={{ textAlign: 'center' }} >
                    <Switch size='small' onChange={(e) => {
                      
                    }} />
                </Form.Item>
            }
        },
        {
            title: <span className='required'>价格(元/PCS)</span>,
            render: (text, record, index) => {
                return <Form.Item name={[name, index, "price"]} rules={[{ required: !isGoName.includes(record.productClass), message: '请输入价格(元/PCS)' }]}>
                  
                </Form.Item>
            }
        }

hook保存值无效的问题

image.png
问题

当我点击删除的时候 可以拿到我的数据data.splice(index,1),然后就直接setDate(data),理想情况下应该就是删除了我想要删除的那一行的数据

解决方法

返回一个新的数组
setData([...data])或者setData(data.slice())

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容