Question

我正在开发一个使用react和redux的项目。

我希望我的SelectField向用户显示字符串，但是在选择选项时选择id值。

我正在使用material-ui 0.19.3v并获得SelectField来显示可在此处选择的用户列表：

<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包含所有用户信息的对象，如name，id，age ...
users包含姓名，ID，年龄的user个对象列表

但我的问题是，当加载初始redux状态时，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>

在您所在的州，只需将用户ID的字符串存储在the_user

中

SelectField显示与值不同的字符串

1 个答案: