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}>

這可以確保您擁有唯一的密鑰並且是可預測的。