使用 Redux-Form 的 Material-UI SelectField 中的零值 MenuItem

Question

我正在使用 Material-UI SelectField 来选择年龄。对于婴儿，这意味着有一个MenuItem 与value={0} 和key={0}。问题：MenuItem中不显示零：

而且似乎Redux Form也没有值，因为触发了required验证：

更奇怪的是，我用react-intl 将值国际化了：

  listAges = (personType, ageFrom, ageTo ) => {
    var items = [];
    _.range(ageFrom.get(personType.code), ageTo.get(personType.code)).forEach(function(age) {
      var text = <FormattedMessage
                    id="personType.years"
                    defaultMessage={`{ age, plural, =0 {{age} años} one {{age} año} other {{age} años} } `}
                    values={{ age: age }}
                />
      items.push(<MenuItem key={age} value={age} primaryText={text}/>);
    });

    return items;
  }

而且零仍然不显示：

在Material-UI demos（长示例）中，零值似乎一切正常。我正在使用redux-form-material-ui。会不会是redux-form 的问题？

我正在使用这些库的最新版本：

"material-ui": "^0.16.4",
"react-intl": "^2.2.3",
"react-redux": "^5.0.2",
"redux": "^3.6.0",
"redux-form": "^6.2.1",
"redux-form-material-ui": "^4.1.2",

对此有何想法/解决方法？

Answer 1

我想你会发现你的问题不在于material-ui，而在于你的age 变量或FormattedMessage（可能age 为空并且被格式化为空字符串）。这是一个基本示例，它使用零表示 key 和 value 没有问题：

class SelectFieldExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: 0 };
  }

  render() {
    const items = [];

    for (let i = 0; i < 5; i++) {
      items.push(
        <MenuItem value={i} key={i} primaryText={`${i} años`} />
      );
    };

    return (
      <SelectField value={this.state.value} onChange={(e, i, v) => this.setState({ value: v }) }>
        {items}
      </SelectField>  
    );
  }
};