Javascript “反应”下拉列表不显示选项

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

<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.map（（选项）=>{
返回(
{option.data}
)
})}

或者只是

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

{this.state.stateCodes.map（（选项）=>(
{option.data}
))}

您需要返回回调函数中的元素

{this.state.stateCodes.map（（选项）=>{
返回(
{option.data}
)
})}

或者只是

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

{this.state.stateCodes.map（（选项）=>(
{option.data}
))}

您的语法不太正确，简而言之，您没有返回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.
    })}

{this.state.stateCodes.map（（选项）=>{
//这是功能体,，
{option.data}
//我们在这里返回未定义，因为上面没有返回。
})}

您可以使用以下任一选项

使用return语句。如果愿意，可以将return语句值括在括号中

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

})}

{this.state.stateCodes.map（（选项）=>{
返回{option.data}
})}

不定义函数体，只定义要返回的值

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

{this.state.stateCodes.map（（option）=>{option.data}

您的语法不太正确，简而言之，您没有返回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.
    })}

{this.state.stateCodes.map（（选项）=>{
//这是功能体,，
{option.data}
//我们在这里返回未定义，因为上面没有返回。
})}

您可以使用以下任一选项

使用return语句。如果愿意，可以将return语句值括在括号中

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

})}

{this.state.stateCodes.map（（选项）=>{
返回{option.data}
})}

不定义函数体，只定义要返回的值

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

{this.state.stateCodes.map（（option）=>{option.data}