setState 与来自 onChange 的数组<select>避免改变</select> label

Question

TL;DR:调用 this.setState 来更新数组避免了 < select > label 与选定的 < option >

说明：我正在构建一个这样的选项数组（dd 用于下拉）：

let ddUsers = (this.state.users.map(user => <option key={uuid.v4()} value={user.key}>{user.name}</option>))

然后这是我的 select：

<select onChange={this.handleFilter}>{ddUsers}</select>

这完美地工作：它首先出现在第一个选项中，并且能够显示其他选项。

这是我的 onChange function：handleFilter

handleFilter = (event) => {

    let selectedUsers;

    console.log(event.target.value, this.state.DEFAULT_KEY)
    if (event.target.value === this.state.DEFAULT_KEY) {
        selectedUsers = [...this.state.users];
    } else {
        selectedUsers = (this.state.users.filter(user => user.key === event.target.value));
    }

    // this.setState({selected: selectedUsers}); <-- The problem comes from this line (looks like atleast)

}

现在使用注释的最后一行，select 的 label 正确更新为所选选项。 但是当我取消注释这一行时，调用了 function，this.state.selected 已更新，但select 在第一个选项上被阻止

明白了吗？ 我错过了什么？

实际上：只需在 function 中调用 setState 即可避免正确更改

Answer 1

这是因为您将option的key设置为每次更新的动态值。 尝试使用一个知道和独特的作为key 。 如下代码

<option key={user.key} value={user.key}>

这可以确保您拥有唯一的密钥并且是可预测的。