反应下拉列表不显示选项

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

您需要在地图回调内返回元素

{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

您的语法不太正确，简而言之，您没有返回option元素。

您正在做的是为传递给您的映射的匿名函数定义一个函数主体，执行一个表达式（您的元素），并返回undefined，因为您没有return语句。

自然，要解决此问题，您应该在函数体中添加return语句，或者对传递给映射的匿名函数使用更简洁的语法。

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