react+antd控制台警告

一个模块的编辑页面select选项

<Col span="8">
    <FormItem {...formItemLayout} label="品牌">
        {getFieldDecorator('brandId', {
            initialValue: data.brandId,
        })(
            <Select>
                {this.props.brand.map((item, index) => {
                    return (
                        <Option key={index} value={item.id}>{item.name}</Option>
                    )
                })}
            </Select>
        )}
    </FormItem>
</Col>

为什么设置Option的属性value={item.id}的时候,页面上select默认选中的就是品牌名称,否则显示品牌的id
然而Option的value属性只能是string类型的,要不然控制台会报警告
如果设置表单的initialValue: data.brandName,点击保存按钮的时候会报500,后台需要的传值是brandIdint类型

clipboard.png
Optionvalue属性和key属性是类似的意思,我把要传的值放到key上并不能解决这个问题
这种警告要怎么解决

阅读 3.9k
2 个回答

泻药!!
按如下修改:

<Col span="8">
    <FormItem {...formItemLayout} label="品牌">
        {getFieldDecorator('brandId', {
            initialValue: String(data.brandId),
        })(
            <Select>
                {this.props.brand.map((item) => {
                    return (
                        <Option key={item.id}>{item.name}</Option>
                    )
                })}
            </Select>
        )}
    </FormItem>
</Col>

Select issues

到目前为止的3.0.2版本,ant-design关于这个Select的Number属性还不支持,写法只能在initValue时设置成String(val.id)的形式强制转换为String类型,然后在提交给后台后使用Number(val)方法强制转换为Number类型提交数据。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题