javascript - 加载选项后选择元素上的默认值

Question

加载选项后有什么方法可以选择默认值？

this.state = { option: localStorage.getItem('option') }
// option = 'sm' | 'qt' | 'gy' | ...

render(){
const storeNames = {sm: 'San Miguel', qt: 'Quito', gy: 'Guayaquil' } // This comes from a remote database
return (
<select defaultValue={this.state.option} onChange={e => {
    localStorage.setItem('option', e.target.value)
    this.setState({ option: e.target.value}) }}>
  { Object.keys(storeNames).map(storeNameIndex => (
    <option value={storeNameIndex} >{storeNames[storeNameIndex]}</option>      
  ))}
</select>
)}

这段代码的问题是它总是选择第一个选项