如何在反应中呈现动态下拉菜单？

【问题标题】：How to render a dynamic drop down in react?如何在反应中呈现动态下拉菜单？
【发布时间】：2022-01-12 00:10:57
【问题描述】：

我正在尝试使用我的 react 项目状态下的数组来呈现下拉菜单。它看起来像这样：

export default class MyTable extends React.Component {
     constructor(props){
          super(props);
          this.state= { list:[1,2,3,4]}
     }

     render() {
          return(
               <div>
                    <select>
                         {this.state.list.map(i => {
                              <option key={i}>{i}</option>
                         })}
                    </select>
               </div>
          );

     }


}

但下拉列表是空白的，我不明白为什么它不起作用？？？

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

您没有从 .map 循环返回任何内容。

修改代码：

export default class MyTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = { list: [1, 2, 3, 4] };
  }

  render() {
    return (
      <div>
        <select>
          {this.state.list.map((i) => {
            // <option key={i}>{i}</option>; Before
            return <option key={i}>{i}</option>; // Return value here
          })}
        </select>
      </div>
    );
  }
}

【讨论】：