javascript - 处理更改并选择选项列表

Question

我是 React 新手，我正在尝试从列表中选择一个选项，然后单击按钮确认选择。我将所选选项保存在“pickedUser”对象中。但是当我更改“pickedUser”的状态时，我认为渲染再次开始，列表就像开始时一样。我只想选择该选项并单击按钮而不重新启动选择列表。如果您能帮助解决问题并指出我需要纠正的错误，以便变得更好。谢谢!

//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);
  }

//In handleChange I'm trying to set a value I get from select to pickedUser.
async handleChange(event) {

    const eName = event.target.value.split(',')[0];
    const eEmail = event.target.value.split(',')[1];
    const eUloga = event.target.value.split(',')[2];
    await this.setState({
      pickedUser:{
        name : eName,
        email: eEmail,
        role: eUloga
      }
    });
  }

//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>

我想正常运行，当我选择该选项时，它保持选中状态，但碰巧当我选择它时，它会再次刷新。我只需要告诉您，当选择该选项时，该值很好，但显示效果却不佳。

Answer 1

从技术上讲，你只需要更正这一行

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

value不应该是对象( pickedUser )，而应该是字符串。

这是working example

但我可以建议以下内容:

1. 制作state.users对象(不是数组)。电子邮件应该是唯一的，因此可以用作 key 。例如:

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

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

   对象还支持像数组一样使用Object.keys(users)进行迭代或Object.values(users)

2. 使用email如key对于 <option> 。在 React 中，索引作为键并不是一个好习惯。

3. 添加id给每个<option>轻松识别事件处理程序中选定的选项

建议版本为here