React下拉列表不显示选项

问题描述 投票:0回答:2

我有一个使用此语句创建的下拉列表:

<select
    id="personState"
    name="personState"
    className="form-control dropDownStyle"
    onChange={this.handleChange}
    value={this.props.person.personState}
>
    {this.state.stateCodes.map((option) => {
        <option key={option.id} value={option.data}>{option.data}</option>
    })}
</select>

使用调试器,我可以看到this.state.stateCodes正在填充一个如下所示的二维数组:

0:{id: 6408, data: "Arkansas"}
1:{id: 5555, data: "Wisconsin"}

但是,下拉列表中不会添加任何选项值。

javascript reactjs
2个回答
1
投票

你的语法不太正确,简而言之,你没有返回选项元素。

你正在做的是为传递给你的地图的匿名函数定义一个函数体,执行一个表达式(你的元素),并返回undefined,因为你没有return语句。

当然,为了解决这个问题,你应该在函数体中添加一个return语句,或者对传递给map的匿名函数使用更简洁的语法。

{this.state.stateCodes.map((option) => {

        //This is the function body, 
        <option key={option.id} value={option.data}>{option.data}</option>

       //We get here and return undefined, as you didn't return above.
    })}

您可以使用以下任何一种方法。

随着return语句。如果您愿意,可以将return语句值包装在括号中。

{this.state.stateCodes.map((option) => {
     return <option key={option.id} value={option.data}>{option.data}</option>

})}

没有定义函数体,只需定义要返回的值。

{this.state.stateCodes.map((option) => <option key={option.id} value={option.data}>{option.data}</option>)}

1
投票

你需要在map回调中返回元素

{this.state.stateCodes.map((option) => {
    return (
     <option key={option.id} value={option.data}>{option.data}</option>
    )
})}

要不就

{this.state.stateCodes.map((option) => (
    <option key={option.id} value={option.data}>{option.data}</option>
))}
热门问题
推荐问题
最新问题