Ant-design: Lorsque le composant select transmet des données via des accessoires, il traverse l'option et signale une erreur

Créé le 12 oct. 2016  ·  3Commentaires  ·  Source: ant-design/ant-design

et version : 2.0.0
Système d'exploitation et sa version : OS X 10.11.6
Navigateur et sa version : chrome 53.0.2785.116

Le code de base est le suivant :

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

Lors du passage Option this.props.options.map erreur est signalée

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

L'erreur est signalée à la ligne 400 dans 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);
  }
});

S'il est directement écrit comme Option , il n'y a pas de problème

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

Commentaire le plus utile

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

ou

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

Tous les 3 commentaires

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

ou

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

c'est @RaoHai
soga

Ce fil a été automatiquement verrouillé car il n'a pas eu d'activité récente. Veuillez ouvrir un nouveau problème pour les bogues associés et créer un lien vers les commentaires pertinents dans ce fil de discussion.

Cette page vous a été utile?
0 / 5 - 0 notes