Javascript 处理更改并选择选项列表

我是新手，我正在尝试从列表中选择一个选项，然后单击按钮确认选择。我将所选选项保存在pickedUser对象中。但是，当我更改PickeUser的状态时，我认为渲染将再次开始，列表与开始时类似。我只想选择该选项并单击按钮，而不重新启动选择列表。如果你能帮我解决问题，并指出我需要改正的错误，这样我才能做得更好。谢谢

//pickedUser saving selected option from list.
constructor(props){
    super(props);
    this.state = {
      users: [],
      pickedUser:{
        name:"",
        email:"",
        uloga:""
      }, 
      isLoading: true,
      errors: null
    };
    this.handleChange = this.handleChange.bind(this);
    this.routeChange = this.routeChange.bind(this);
  }

我想正常工作，当我选择该选项时，它保持选中状态，但当我选择它时，它会再次刷新。

---

我只需要告诉您，当选择该选项时，该值是正确的，但显示不正确。

从技术上讲，您只需更正这一行即可

<select
    id="list"
    value={pickedUser.name + "," + pickedUser.email + "," + pickedUser.role}
    onChange={event => this.handleChange(event)}
>

在这种情况下，您将能够通过电子邮件从用户中提取用户

对象还支持类似使用Object.KeyUsers或Object.valuesusers的数组的迭代

使用电子邮件作为密钥。在React中，索引为键不是很好的做法

将id添加到每个事件处理程序中，以便轻松标识事件处理程序中的选定选项

---

建议的版本是

routeChange方法的作用是什么？请注意，每次使用setState更改状态时，组件都会重新呈现。单击“选择”按钮时是否需要更改手柄？因为它将调用setState，而setState反过来将重新渲染组件。仅供参考，handleChange不需要async函数，您可以删除async并等待。1我调用routeChange at onClick in按钮，并使用它转移到另一页。2我注意组件正在重新呈现，我希望在选择选项时停止该操作。非常感谢！你帮助我解决了我的问题。也谢谢你提供的非常有用的提示。

//And this is a part of my render.
render() {
    const { isLoading, users, pickedUser } = this.state;
    return (
      <div>
        <select
          id="list"
          value={pickedUser}
          onChange={event => this.handleChange(event)}
        >
          {!isLoading ? (
            users.map((user, key) => (
              <option key={key}>
                {user.name},&emsp; {user.email}, &emsp; {user.role}
              </option>
            ))
          ) : (
            <p>Loading...</p>
          )}
        </select>
        <button id="b1" type="button"
          value={pickedUser}
          onClick={event => {
            this.handleSubmit(event);
            this.routeChange();
          }}>
          Sign in
        </button>

<select
    id="list"
    value={pickedUser.name + "," + pickedUser.email + "," + pickedUser.role}
    onChange={event => this.handleChange(event)}
>

this.state = { users: { "jack@mail.com": {name: "Jack", uloga: "aaa"},
    "mark@mail.com":  {name: "Mark", uloga: "aaa"} } }