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

但是我可以建议以下内容：

制作state.users对象（不是数组）。电子邮件应该是唯一的，因此可以用作密钥。例如：
```
this.state = { users: { "jack@mail.com": {name: "Jack", uloga: "aaa"},
    "mark@mail.com":  {name: "Mark", uloga: "aaa"} } }
```
在这种情况下，您将能够通过电子邮件从users中提取用户。

对象还支持迭代，例如使用Object.keys(users)或Object.values(users)
将email的{{1}}用作key。在React中，将索引作为键不是一种好习惯。
向每个<option>添加id，以轻松识别事件处理程序中的选定选项

建议版本为here

处理更改并选择选项列表

1 个答案: