Javascript ReactIS：选择下拉列表中的默认值未被真正选择

我有一个选择下拉列表，我想设置一个默认值为用户友好。但是，如果用户不将选择更改为其他内容，我就无法获得实际值。我一定做错了什么事，但那是什么

这是我的密码： 在构造函数中

constructor(props) {
   super(props);
   this.state = {};
   this.state = {
      …
      reward: this.props.milestone.reward || "",
      …
   };
this.onMilestoneRewardChanged = this.onMilestoneRewardChanged.bind(this);


render(){
<td className="input-group-sm col-sm-1">
   <select className="form-control"
         defaultValue={combinedRewards[0]}
         value={this.state.reward}
         onChange={(e) => this.onRewardChanged(milestoneIdx, e)}>
      {combinedRewards.map(this.renderRewardIDs)}
   </select>
</td>
}

renderRewardIDs(reward, idx) {
   return (
      <option key={idx} value={reward.id}>{reward.id}</option>
   );
}

onRewardChanged(Idx, event){
   this.setState({reward: event.target.value});
   …
}

构造函数（道具）{
超级（道具）；
this.state={}；
此.state={
…
奖励：this.props.milestone.raward | |“”，
…
};
this.onMilestoneRewardChanged=this.onMilestoneRewardChanged.bind（this）；
render（）{
此.onRewardChanged（milestoneIdx，e）}>
{combinedRewards.map（this.renderwardId）}
}
RenderWardID（奖励，idx）{
返回(
{raward.id}
);
}
onRewardChanged（Idx，事件）{
this.setState（{raward:event.target.value}）；
…
}

---

因此，列表中的第一项显示为默认值，但如果用户认为该项已被选中，并且没有将其更改为其他项，则“保存数据”中的“奖励”字段最终为空。为什么？

我相信这是因为你的初始状态

奖赏：this.props.milestone.raward | | |“

保存时，如果未定义此.props.milestone.reward，则如果未发生用户交互，则该值将为

“”

还不清楚

组合向列[0]

的值是什么。如果将defaultValue设置为

combinedRewards[0]

，则可能应该将初始状态设置为相同的值

也许是这样的

constructor(props) {
   super(props);
   this.state = {};
   this.state = {
      …
      reward: this.props.milestone.reward || combinedRewards[0], // updated
      …
   };
this.onMilestoneRewardChanged = this.onMilestoneRewardChanged.bind(this);


render(){
<td className="input-group-sm col-sm-1">
   <select className="form-control"
         defaultValue={this.state.reward} // updated
         value={this.state.reward}
         onChange={(e) => this.onRewardChanged(milestoneIdx, e)}>
      {combinedRewards.map(this.renderRewardIDs)}
   </select>
</td>
}

构造函数（道具）{
超级（道具）；
this.state={}；
此.state={
…
奖励：this.props.milestone.raward | | combinedRewards[0]，//已更新
…
};
this.onMilestoneRewardChanged=this.onMilestoneRewardChanged.bind（this）；
render（）{
此.onRewardChanged（milestoneIdx，e）}>
{combinedRewards.map（this.renderwardId）}
}