时间戳

首页 > 解决方案 > setState 与来自 onChange 的数组标签

reactjs - setState 与来自 onChange 的数组标签

问题描述

TL;DR:调用 this.setState 来更新数组避免 <select> 标签与所选 <option> 的更改

说明： 我正在构建一个这样的选项数组（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

解决方案

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

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

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

推荐阅读