SelectField для отображения строки, отличной от значения

Question

Я работаю над проектом, в котором используются response и redux.

Я хочу, чтобы мой SelectField отображал строку для пользователей, но выбирал значение идентификатора при выборе параметра.

Я использую material-ui 0.19.3v и получил SelectField для отображения списка пользователей, чтобы выбрать из linke здесь:

<SelectField
    value={this.props.the_user}
    onChange={(e, i, value) => this.props.setUser(value)}>
    <MenuItem value="" primaryText="" />
    {
        this.state.users.map(x =>
        <MenuItem
            key={`${x.id}MenuItem`}
            value={x}
            primaryText={x.name}
        />)
    }
</SelectField>

В this.props Я получил

• the_user объект, который содержит всю пользовательскую информацию, такую ​​как имя, идентификатор, возраст ...
• users список user объектов, который содержит имя, идентификатор, возраст ...

Но моя проблема в том, что при загрузке начального состояния приращения поле SelectField пустое, хотя the_user является допустимым объектом, и я не знаю, как правильно это сделать.Нужен совет.

Answer 1

Вам нужно использовать фактическое значение вместо объекта, как

<SelectField
    value={this.props.the_user} //Set the_user as user's id instead of object
    onChange={(e, i, value) => this.props.setUser(value)}>
    <MenuItem value="" primaryText="" />
    {
        this.state.users.map(x =>
        <MenuItem
            key={`${x.id}MenuItem`}
            value={x.id} //here use the id so its type matches the default value supplied to Select field
            primaryText={x.name}
        />)
    }
</SelectField>

И в вашем штате просто сохранить строку идентификатора пользователя в the_user