React下拉列表不显示选项

Question

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

<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"}

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

Answer 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>)}

Answer 2

你需要在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>
))}