Javascript React.js选择列表不包含所选选项

我的React.js应用程序中有2个

列表。它们渲染良好，并附加到

handleChange

函数。它们被编程为最初默认为第一个选项

当用户选择另一个选项时，列表在视觉上似乎保持了第一个选项。但是，当我提交表单并警告状态中的关联值时，它会警告用户选择的值

下面是我的渲染函数：

<div id="userActions">
  <form id="userActionsForm" onSubmit={this.handleSubmit}>
    <label htmlFor="operator">Operator:</label>
    <select
      id="operator"
      name="operator"
      value={this.state.operator}
      onChange={this.handleChange}
    >
      {this.state &&
        this.state.operators &&
        this.state.operators.map((op) => <option value={op}>{op}</option>)}
    </select>
    <label htmlFor="user">User:</label>
    <select
      id="user"
      name="user"
      value={this.state.user}
      onChange={this.handleChange}
    >
      {this.state &&
        this.state.testUsers &&
        this.state.testUsers.map((tu) => <option value={tu}>{tu}</option>)}
    </select>
    <div className="submit">
      <input type="submit" value="Submit" />
    </div>
    <span className="error">{this.state.error}</span>
  </form>
</div>

这是我的

提交

：

handleSubmit（事件）{
警报（this.state.user）；
警报（this.state.operator）；
event.preventDefault（）；
}

问题在于，您正在通过如下方式更新

handleChange

中的状态，即

this.state.operator=event.currentTarget.value。您应该永远不要直接更新状态。你需要使用

我刚刚在下面为您创建了一个片段。您可以单击“RunCodeSnippet”并查看它的运行情况。我使用
event.target.name
作为
state
对象中的键，简化了
handleChange
方法

您还需要为列表中的每个子级添加唯一的
键
道具（例如，当您使用
.map（）
时）


常量运算符=[“op1”、“op2”、“op3”]；
const testUsers=[“user1”、“user2”、“user3”、“user4”]；
类应用程序扩展了React.Component{
状态={
运算符：运算符[0]，
运营商，
测试用户，
用户：testUsers[0]，
};
handleChange=（事件）=>{
这是我的国家({
[event.target.name]：event.target.value
});
};
handleSubmit=（事件）=>{
event.preventDefault（）；
console.log({
用户：this.state.user，
接线员：this.state.operator，
});
};
render（）{
返回(
接线员：
{this.state.operators.map（（operator）=>(
{运算符}
))}
用户：
{this.state.testUsers.map（（用户）=>(
{user}
))}
提交
{this.state.error}
);
}
}
ReactDOM.render（，document.getElementById（'root'））

---

您的构造函数是什么样子的？