setState与数组从onChange的避免更改标签

Question

TL；DR：调用this.setState更新数组可避免更改

说明：我正在构建这样的选项数组（dd代表下拉列表）：

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

然后这里是我的选择：

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

这非常有效：它首先显示第一个选项，并且能够显示其他选项。

这是我的onChange函数：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的标签将正确更新为所选选项。但是当我取消注释这一行时，函数被调用，this.state.selected被更新，但是select在第一个选项上被阻止。

清楚了吗？我错过了什么？

事实上：只需在函数中调用setState就可以避免正确的更改

Answer 1

这是因为您正在将选项的键设置为每次更新的动态值。尝试使用已知且唯一的键作为键。代码如下所示

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

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