setState与<select>的onChange一起使用的数组避免更改<select>标签

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已更新 BUT ，但选择在第一个选项上被阻止。

清楚吗？我想念什么？

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

1 个答案:

答案 0 :(得分：1)

这是因为您将key中的option设置为动态值，该值每次都会更新。尝试将一个已知且唯一的知识用作key。如下代码

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

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

相关问题

• 如何在另一个<Select>的输入上更改<Select>的可用值
• 如何使用<label> <input> <button>在<input>中启用自动完成功能
• 如何使用文件<input type =“ file” />更改<label>中的文本
• 更新<input>值onchange
• PHP数组：<选择>框和<optgroup>
• 反应：OnChange下拉菜单返回整个<select> </select>标签
• setState与<select>的onChange一起使用的数组避免更改<select>标签
• JS使用onChange <select>激活的多个计时器
• 在for循环中使用<label> <input> <br>
• Typescript React <Select> onChange处理程序类型错误

最新问题

• 我写了这段代码，但我无法理解我的错误
• 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
• 是否有可能使 loadstring 不可能等于打印？卢阿
• java中的random.expovariate()
• Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
• 为什么我的 Onclick 箭头功能在 React 中不起作用？
• 在此代码中是否有使用“this”的替代方法？
• 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
• 每千个数字得到
• 更新了城市边界 KML 文件的来源？

Answer 1

这是因为您将key中的option设置为动态值，该值每次都会更新。尝试将一个已知且唯一的知识用作key。如下代码

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

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