react ant3 From表单报错:`value` is not validate prop, do you mean `checked`?

最新推荐文章于 2023-10-12 13:59:50 发布

小童姥

最新推荐文章于 2023-10-12 13:59:50 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： react.js 前端 typescript

本文链接：https://blog.csdn.net/weixin_43749669/article/details/125678671

在更新一个使用Ant3的成熟React项目时，遇到Switch组件无法根据后台返回的Boolean值正确回显状态的问题。错误提示为`value`不是一个验证属性，可能是指`checked`。通过设置`defaultChecked`和查阅文档发现，应当使用`valuePropName`来控制显示状态。注意，`valuePropName`与`defaultChecked`不能同时使用，正确配置后问题得到解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近迭代一个原本就很成熟的的 react 项目, 他用到 ant3
下面讲下我的报错场景 :
需求需要一个开关, 这个开关会根据当前项目的id , 展示它一开始是否开启或者关闭的状态.
也就是说我这个 Switch 要根据后台返回的字段回显状态
问题就是 : 有字段并且也是 Boolean , 但回显不了 !!!

上原代码:

 <Form.Item key='isEnable' label='是否启用'>
     {getFieldDecorator('isEnable', {
          initialValue: listData?.enable,
        })(<Switch checkedChildren="开" unCheckedChildren="关" />)}
  </Form.Item>

原代码效果图:
在这里插入图片描述
网上查了下 ,说 defaultChecked 可控制回显, 看实验版如下 :

<Form.Item key='isEnable' label='是否启用'>
     {getFieldDecorator('isEnable', {
       initialValue: listData?.enable,
     })(<Switch  defaultChecked={listData?.enable} 
         checkedChildren="开" unCheckedChildren="关" />)}
</Form.Item>

在这里插入图片描述
终极解决: 用到 valuePropName 文档说 ,它是显示状态的.

 <Form.Item key='isEnable' label='是否启用'>
   {getFieldDecorator('isEnable', {
     initialValue: listData?.enable,
     valuePropName: 'checked'
   })(<Switch checkedChildren="开" unCheckedChildren="关" />)}
 </Form.Item>