React使用value而不是selected来保持表单组件的一致性。您可以使用defaultValue设置初始值。如果要控制该值，还应该设置value。如果没有，请不要设置value，而是处理onChange事件以响应用户操作。

注意value和defaultValue应与选件的value匹配。

如果要设置占位符而不选择默认值，则可以使用此选项。

<select defaultValue={'DEFAULT'} >
        <option value="DEFAULT" disabled>Choose a salutation ...</option>
        <option value="1">Mr</option>
        <option value="2">Mrs</option>
        <option value="3">Ms</option>
        <option value="4">Miss</option>
        <option value="5">Dr</option>
      </select>

在这里，用户被迫选择一个选项！

编辑

如果这是受控组件
在这种情况下，不幸的是，你将不得不同时使用defaultValue和value，这有点违反了React。这是因为react by语义不允许将disabled值设置为active。

function TheSelectComponent(props){
     let currentValue = props.curentValue || "DEFAULT";
     return(
      <select value={currentValue} defaultValue={'DEFAULT'} onChange={props.onChange}>
        <option value="DEFAULT" disabled>Choose a salutation ...</option>
        <option value="1">Mr</option>
        <option value="2">Mrs</option>
        <option value="3">Ms</option>
        <option value="4">Miss</option>
        <option value="5">Dr</option>
      </select>
    )
}

您可以将<select>标记上的selected属性设置为在构造函数中设置的this.state属性。这样，您设置的初始值（默认值）和下拉列表更改时，您需要更改状态。

constructor(){
  this.state = {
    selectedId: selectedOptionId
  }
}

dropdownChanged(e){
  this.setState({selectedId: e.target.value});
}

render(){
  return(
    <select value={this.selectedId} onChange={this.dropdownChanged.bind(this)}>
      {option_id.map(id =>
        <option key={id} value={id}>{options[id].name}</option>
      )}
    </select>
  );
}

像这样使用defaultValue和onChange

const [myValue, setMyValue] = useState('');

<select onChange={(e) => setMyValue(e.target.value)} defaultValue={props.myprop}>
                    
       <option>Option 1</option>
       <option>Option 2</option>
       <option>Option 3</option>

</select>

示例https://codesandbox.io/s/priceless-lamarr-fetpr?file=/src/App.js

谢谢大家的这条线索！我和我的同事刚刚发现default_value属性是一个常量，而不是变量。
在我构建的其他React表单中，Select的默认值是在关联的Context中预设的。因此，第一次渲染Select时，default_value被设置为正确的值。
但在我最新的React表单（一个小的模态）中，我将表单的值作为props传递，然后使用useEffect填充相关的Context。因此，第一次渲染Select时，default_value被设置为null。然后，当上下文被填充并且选择应该被重新呈现时，default_value不能被改变，因此初始默认值没有被设置。
最终的解决办法很简单：请改用value属性。但是要弄清楚为什么default_value不能像我的其他表单那样工作需要一些时间。
我发布这个是为了帮助社区中的其他人。

使用Hooks和useState

使用defaultValue选择默认值。

const statusOptions = [
        { value: 1, label: 'Publish' },
        { value: 0, label: 'Unpublish' }
    ];
    const [statusValue, setStatusValue] = useState('');
    const handleStatusChange = e => {
        setStatusValue(e.value);
    }

return(
<>
<Select options={statusOptions} 
    defaultValue={[{ value: published, label: published == 1 ? 'Publish' : 'Unpublish' }]} 
    onChange={handleStatusChange} 
    value={statusOptions.find(obj => obj.value === statusValue)} required />
</>
)

一个简单的解决方案来设置值，而不使用选择在选项，
请执行以下步骤：
将值默认为0 [我不认为它是要使用的值]到x-column
参考imagex 1c 0d1x
4步
1.设置x列****的IntialValue：0到
1.使用在[selected]中使用的相同字符串，并在此处使用if条件设置它，找到时，标记“values.x-column = 0”
1.删除标签4中设置的“selected”和其他项目[如果有]。最后设置此条件
现在导航，列中的值默认为在步骤-2/中标记的值，您希望将其设置为选中
我试过了，它对我很有效
一个小小的修正。第45行在图像中..将列读取为 column_value_id

我尝试了不同的选项，以避免控制台错误，以下选项与所选选项一起工作，在控制台中没有错误：

{const [myValue, setMyValue] = useState('');  
  const changeHandler = (e) => {
    setMyValue(e.target.value);
  };
<select id="select" value={myValue} onChange={changeHandler}>
            {!myValue&& <option value="">choise from list</option>}
            {elementsArr.map((el) => {
              return (
                <option key={el.id} value={el.name}>
                  {el.name}</option>
              );
            })
          </select>}

从选项，你应该是insteadofvaluetodefaultValuefrom options of that select：->

<select className="form-control text-align:center" onChange={handleChangeCountry}>
            <option type="others" >Select a Country</option>
            {users?.length > 0 && users.map(item => {
              return (<option selected={item.country_name === countryName} key={item.country_id} defaultValue={item.country_id} >
                {item.country_name}
              </option>)
            })}
          </select>