Uncaught TypeError: Cannot read property ‘isSelectOptGroup‘ of undefined 关于渲染sel

最近在用antd自动生成表单时，需要生成一个select，具体效果就是根据下面的这个数据的匹配到的key来生成对应的value具体的核心代码如下：

const formItems = result.map((item, index) => (
      <Col span={24 / colSpan} key={index}>
        <Form.Item label={item.name}>
          {getFieldDecorator(item.key, {
            initialValue: item.value.toString(),
            rules: [
              {
                required: true,
                message: '配置信息不能为空',
              },
              {
                pattern: item.regular,
                message: item.message,
              },
            ],
          })(
            this.test(item.key)
          )}
        </Form.Item>
      </Col>
    ));

test函数具体实现，这里是通过find匹配到相同的key就返回Select

  test = key => {
    const foundItem = test.find(item => item.key === key);
    if (foundItem) {
      return foundItem.value;
    } else {
      return <Input />;
    }
  };

test数据

const test=[{key:'a',value:(<Select> </Select>)},{key:'b',value:(<Select > </Select>)}]

结果渲染到页面的时候直接就报错了：这个错误的大概原因就是：该组件的子元素格式不正确或者包含了无效的内容

编辑

我这里的错误是由于Select组件中间多了一个空格，导致它把这个空格当作Option来处理了，最后导致很逆天的错误，最后是使用了ctrl+s格式化了代码，让两个Select在不同行，成功渲染。但是如果Select在同一行并且中间是空格的话，就会出现问题

但是如果这样写换行书写，好像无论哪有空格都可以渲染，（具体区别也不清楚）

const test1 = [
  { 
    key: 'a', 
    value: <Select> 

     </Select> },

];

总结：为了避免这种错，每次写代码使用ctrl+s格式化代码感觉是一个很好的习惯，只能说自己代码还是不够规范，导致出了这种错误。