Select onChange 成功后值变回默认值

Question

我正在实现一个表单，用户可以在其中动态添加或删除下拉菜单。通过下拉菜单，用户可以管理 participants/voters.

在 select 访问用户后，select 访问的用户不应再次出现在下拉列表和其他可用下拉列表中。

带有动态下拉菜单的部分被导出到一个新的功能组件VotingGroups。在这个组件中，我传递了回调和两个状态（groups、unselectedUsers）。

VotingGroups({
    groups,
    addGroup,
    deleteGroup,
    addVoterDropdown,
    removeVoterDropdown,
    saveVoter,
    saveGroupRate,
    unselectedUsers,
})

用户在 groups 状态下得到更新（检查 setGroups 行下方）并且这没有任何 UI 问题。

错误：

从下拉列表中选择 user/voter 后，我仍然看到默认值 “选择选民”。只有当我更新 unselectedUsers 状态时，我才会遇到错误（通过取消注释 setUnselectedUsers 行一切正常）。在调试模式下，我看到该值已更改为 selected，经过几次渲染后，它又变回默认值。

unselectedUsers 状态也得到正确更新。

这就是我在 saveVoter 回调中更新两种状态（使用 setState 挂钩）的方式：

setGroups(newGroups);
setUnselectedUsers(prevState => prevState.filter(user => user.uid !== newUser.uid))

这是select部分：

<select className="form-control col-sm-4"
    name={"selectVoter"}
    value={voter?.user?.uid}
    onChange={(e) => saveVoter(
        e.target.value, groupIndex, dropdownIndex)}
    required>
    <option value="">Choose Voter</option>
    {
        unselectedUsers[0] !== undefined
            ? unselectedUsers.map((user) => {
                return (
                    <option key={user.uid}
                        value={user.uid}>{user.username}</option>
                )
            })
            : null
    }
</select>

Answer 1

找到解决方案。

问题出在html<select>部分

下拉菜单只能显示 <option><option/> 部分中存在的值。

仅显示 unselectedUsers 下拉列表无法显示所选用户。

我只需要添加以下代码行：

{ voter.user?.uid ? <option value={voter.user.uid}>{voter.user.username}</option> : null }

下

<option value="">Choose Voter</option>

Select onChange 成功后值变回默认值

Select value changes back to default after successful onChange

javascript

html-select

reactjs

bootstrap-4