Ant-design: Cuando el componente de selección pasa datos a través de accesorios, atraviesa la opción e informa un error

Creado en 12 oct. 2016  ·  3Comentarios  ·  Fuente: ant-design/ant-design

versión antd: 2.0.0
Sistema operativo y su versión: OS X 10.11.6
Navegador y su versión: chrome 53.0.2785.116

El código básico es el siguiente:

<FormItem
  label="选择业务"
  labelCol={{ span: 6 }}
  wrapperCol={{ span: 14 }}
>
  {getFieldDecorator('bid', { initialValue: "1" })(
    <Select 
      size="large" 
      style={{ width: 150 }}
      onChange={this.handleSelectChange.bind(this)}
    >
      {
        this.props.options.map((item, index) => {
          <Option key={index} value={item.id}>{item.name}</Option>
        })
      }
    </Select>
  )}
</FormItem>

Al atravesar Option this.props.options.map error

Select.js:400 Uncaught TypeError: Cannot read property 'type' of null

El error se informa en la línea 400 en Select.js

_react2["default"].Children.forEach(children, function (child) {
  if (child.type === _OptGroup2["default"]) {
    var maybe = _this2.getLabelBySingleValue(child.props.children, value);
    if (maybe !== null) {
      label = maybe;
    }
  } else if ((0, _util.getValuePropValue)(child) === value) {
    label = _this2.getLabelFromOption(child);
  }
});

Si se escribe directamente como Option , no hay problema

<FormItem
  label="选择业务"
  labelCol={{ span: 6 }}
  wrapperCol={{ span: 14 }}
>
  {getFieldDecorator('bid', { initialValue: "1" })(
    <Select 
      size="large" 
      style={{ width: 150 }}
      onChange={this.handleSelectChange.bind(this)}
    >
      <Option value="1">option1</Option>
      <Option value="2">option2</Option>
    </Select>
  )}
</FormItem>

Comentario más útil

this.props.options.map((item, index) => {
    return <Option key={index} value={item.id}>{item.name}</Option>
})

o

this.props.options.map((item, index) => <Option key={index} value={item.id}>{item.name}</Option>)

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Todos 3 comentarios

this.props.options.map((item, index) => {
    return <Option key={index} value={item.id}>{item.name}</Option>
})

o

this.props.options.map((item, index) => <Option key={index} value={item.id}>{item.name}</Option>)

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions

@RaoHai
refresco

Este hilo se ha bloqueado automáticamente porque no ha tenido actividad reciente. Abra una nueva edición para errores relacionados y enlace a comentarios relevantes en este hilo.

¿Fue útil esta página
0 / 5 - 0 calificaciones