antd 在使用select 时报错

Question

antd： 1.11.1 /
react.js： 0.14.7

在使用antd的select时报错Uncaught Error: no key or value for [object Object]

代码附上：

<Form horizontal form={this.props.form} onSubmit={this.handleSubmit.bind(this)}>
                    <FormItem
                        {...formItemLayout}
                        label="导航配置版本名称"
                        hasFeedback
                        >
                        <Select key='0' labelInValue defaultValue={{key:navigationConfigVersionName}} size="large" name="navigationConfigVersionName" placeholder="请选择导航配置名称" style={{ width: '100%' }} onChange={this.handleChange.bind(this)}>
                            {option}
                        </Select>
                    </FormItem>
                </Form>

数据是从接口中查出，我在使用defaultValue给默认值时，发生这个错误，请问是什么问题？怎么解决？

我在网上也查到类似问题https://github.com/ant-design...
据说是给select 加个key? 我给它加了自定义的key='0'，仍然报这个错，是我理解错误还是哪里有问题？基本上只要使用defaultValue就会报这个错。

现在的情况是这样的，可以把传过来的值查到，但是不是作为select的默认值，而是在下拉中的第一位，红框部分是我的默认值：

谢谢！

我把代码放在这里：

render() {

        const { getFieldProps , getFieldError, isFieldValidating} = this.props.form;

        /**从上一页传过来的默认值 */
        let navigationRow = this.props.navitationRow;
        let navigationConfigVersionId = navigationRow.advertisementConfigVersionId;
        let navigationConfigVersionName = navigationRow.navigationConfigVersionName;
        let navigationConfigVersionHtmlUrl = navigationRow.navigationConfigVersionHtmlUrl;


        /**接口中的数据 */
        let navigationConfigRows = this.props.iosAndroidState.navigationConfigEntity;
        console.log("454131" + navigationConfigRows);

        /**组织接口中数据在下拉中显示 */
        let option;
        let optionSize;

        if (!navigationConfigRows) {
            option = (<Option>加载中...</Option>);
        } else {
            let list = navigationConfigRows.list;
            console.log("546541346" + list);
            if (list) {
                optionSize = list.length;
                option = list.map((row, i) => {
                    let {appConfigVersionId,configVersionName} = row;
                    return <Option key={i} value={appConfigVersionId}>{configVersionName}</Option>
                });
            }

            if(!navigationRow){
                option = [<Option key={optionSize}>{'下拉选择'}</Option>, ...option];
            }else{
                option = [<Option key={navigationConfigVersionId} value={navigationConfigVersionName}>{navigationConfigVersionName}</Option>, ...option];
            }

        }

         const formItemLayout = {
            labelCol: { span: 7 },
            wrapperCol: { span: 12 }
        };
        /**antd 组件Select 添加labelInValue的目的是为了在选择数据时，除了拿到它的value外，也可以拿到它的label */

        let defaultName = {navigationConfigVersionName}
        return (
            <div>
                <Form horizontal form={this.props.form} onSubmit={this.handleSubmit.bind(this)}>
                    <FormItem
                        {...formItemLayout}
                        label="导航配置版本名称"
                        hasFeedback
                        >
                        <Select labelInValue defalutValue={defaultName} size="large" placeholder="请选择导航配置名称" style={{ width: '100%' }} onChange={this.handleChange.bind(this)}>
                            {option}
                        </Select>
                    </FormItem>
                </Form>
            </div>
        )
    }

在select的子级中我有加key,但还是报错，真心不会搞了我，求大神帮忙。

Answer 1

请仔细查看 antd 的 API...叫你加 key 是让你在 select 子级里加上 key..说你这key没有是你{option}里的没这个key。。。

Answer 2

我今天碰到了另一个相似的问题，报的错是'Need at least a key or a value or a label (only for OptGroup) for [object Object]'

因为基本没在网上找到答案，后来还是自己试出来的，在这里说一下，以后有人碰到相似的，也许可以帮上忙。

在我的代码里，当负责遍历出<Select>的<Option>的数组结构为['']时，就会报我第一行写的错误。是后台配置数据时有点无脑，导致前台取数据时就发生了这么滑稽的情况. 如果是正常的数组或者空数组，都不会有问题，唯独['']这玩意很尴尬.

            let { attrItem } = this.state;
            let data = attrItem.allowableValue.split(',');
              return <Select>
                {data.map(item => <Option key={item}>{item}</Option>)}
              </Select>}

后来，我小改了一下，真是没想要会需要这样。

let { attrItem } = this.state;
            let data = attrItem.allowableValue.split(',');
              return <Select>
                {data.map(item => (item?<Option key={item}>{item}</Option>:null))}
              </Select>}

所答或许并非楼主所问，在此道歉。只是留给可能需要的人。

Answer 3

因为没有实际有测试环境的情况下，只能提供建议。其实你可以除错看是哪一行报错的，应该可以马上知道问题出在哪里。所有的Option组件都要有key与value，而且key不能重覆。所以猜测下面这几行可能有点问题。

下面这行没key，没value。

option = (<Option>加载中...</Option>);

下面这行有key值，但没value，但一般来说它如果是第一个项目应该key值是最小的那个，不过没重覆应该是可以这样用。

option = [<Option key={optionSize}>{'下拉选择'}</Option>, ...option];

下面这行猜测有key值，但不是很清楚key是什么。

option = [<Option key={navigationConfigVersionId} value={navigationConfigVersionName}>{navigationConfigVersionName}</Option>, ...option];

---

不过这代码中的option写法我觉得不是很好，有可能在过程中被改变了资料类别，我改写在下面:

应该一开始就声明option是个数组。后面要加到里面要用Array.push的方法来加。

//let option;
let option = [];

所以这行，要改一下:

//option = (<Option>加载中...</Option>);
option.push(<Option>加载中...</Option>);

其他的也要改一下，大概像下面这样:

//option = [<Option key={optionSize}>{'下拉选择'}</Option>, ...option];
option.unshift(<Option key={optionSize}>{'下拉选择'}</Option>);

Answer 4

楼上说的很好，所有的Option都必须有key属性，而且是唯一值，这个是React的规定。
可以直接用数据库的记录id来做key