原因是，React通过 using 提供了一种更好的控制元素的方法states，因此不要使用selectedwith 选项，而是使用 value 属性select并在state变量中定义其值，使用onChange方法更新state，以这种方式使用它：

class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            value: '1'
        };
    }

    render(){
       return(
           <select value={this.state.value} onChange={(e)=>{this.setState({value: e.target.value})}}>
              <option value='1' disabled>Select</option>
              {
                  [2,3,4].map((i,j)=>{
                      return <option key={i} value={i}>{i}</option>
                  })
              }
           </select>
       );
    }
}

如何为下拉菜单设置占位符？

根据Mozilla Dev Network 的说法，占位符不是<select>. 因此，您可以代替它来呈现一个default选项：

<option default>Select</option>

根据DOC使用密钥：

键可帮助 React 识别哪些项目已更改、添加或删除。应为数组内的元素提供键，以赋予元素稳定的身份。

建议：

每当我们创建任何ui dynamicallyin 循环时，我们都需要为unique每个分配一个键element，以便react可以轻松识别元素，它基本上用于改进performance.

检查工作示例：

class App extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        value: '1'
    };
}

render(){
   return(
       <select value={this.state.value} onChange={(e)=>{this.setState({value: e.target.value})}}>
          <option value='1' disabled>Select</option>
          {
              [2,3,4].map((i,j)=>{
                  return <option key={i} value={i}>{i}</option>
              })
          }
       </select>
   );
}
}

ReactDOM.render(<App />, document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='container'/>

检查小提琴的工作示例：https : //jsfiddle.net/29uk8fn0/