Нулевое значение MenuItem в Material-UI SelectField с Redux-формой

Question

Я использую Material-UI SelectField, чтобы выбрать возраст. Для младенцев это означает, что есть MenuItem с value={0} и key={0}. Проблема: ноль не отображается в MenuItem:

И мне кажется, что режиссерская форма также остается без значения, потому что проверка 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> 
    ); 
    } 
};