setState with array from onChange of <select> 避免 <select> 标签的变化答案

【问题标题】：setState with array from onChange of <select> avoid the change of the <select> labelsetState with array from onChange of <select> 避免 <select> 标签的变化
【发布时间】：2020-01-29 13:24:36
【问题描述】：

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)

}

现在有了最后一行的注释，选择的标签正确地更新为选定的选项。但是当我取消注释这一行时，该函数被调用，this.state.selected 被更新但是选择在第一个选项上被阻止。

清楚吗？我错过了什么？

其实：只是在函数中调用setState避免了正确的变化

【问题讨论】：

标签： reactjs

【解决方案1】：

这是因为您将option 的key 设置为每次都会更新的动态值。尝试使用已知且独特的key。如下代码

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

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

【讨论】：