鍍金池/ 問答/HTML/ react+antd控制臺警告

react+antd控制臺警告

一個(gè)模塊的編輯頁面select選項(xiàng)

<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>

為什么設(shè)置Option的屬性value={item.id}的時(shí)候，頁面上select默認(rèn)選中的就是品牌名稱，否則顯示品牌的id
然而Option的value屬性只能是string類型的，要不然控制臺會報(bào)警告
如果設(shè)置表單的initialValue: data.brandName,點(diǎn)擊保存按鈕的時(shí)候會報(bào)500，后臺需要的傳值是brandId為int類型

clipboard.png
Option的value屬性和key屬性是類似的意思，我把要傳的值放到key上并不能解決這個(gè)問題
這種警告要怎么解決

回答
編輯回答
舊螢火

Select issues

到目前為止的3.0.2版本，ant-design關(guān)于這個(gè)Select的Number屬性還不支持，寫法只能在initValue時(shí)設(shè)置成String(val.id)的形式強(qiáng)制轉(zhuǎn)換為String類型，然后在提交給后臺后使用Number(val)方法強(qiáng)制轉(zhuǎn)換為Number類型提交數(shù)據(jù)。

2018年9月18日 03:21
編輯回答
純妹

瀉藥！！
按如下修改：

<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>
2017年7月11日 21:04