Javascript 选择值在成功更改后更改回默认值

我正在实现一个表单，用户可以在其中动态添加或删除下拉列表。通过下拉列表，用户可以管理参与者/投票人

选择用户后，所选用户不应重新出现在下拉列表中的其他可用下拉列表中

带有动态下拉列表的零件将导出到新的功能组件

VotingGroups

。在这个组件中，我传递回调和两个状态（

组

，

未选择的用户

）

用户在

组

状态中得到更新（选中

设置组

行下方），这在没有任何UI问题的情况下工作

错误：

从下拉列表中选择用户/投票者后，我仍然可以看到默认值“Choose voter”。只有当我更新

unselectedUsers

状态时，我才会收到错误（通过取消

setUnselectedUsers

行的注释，一切正常）。在调试模式下，我看到该值被更改为选中的值，并在几次渲染后将其更改回默认值

unselectedUsers

状态也会正确更新

这就是我如何在

saveVoter

回调中更新这两个状态（使用setState钩子）：

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

以下是选择部分：

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

saveVoter(
e、 target.value，groupIndex，dropdownIndex）}
必需>
选择投票人
{
未选择的用户[0]！==未定义
？未选择的用户映射（（用户）=>{
返回(
{user.username}
)
})
：null
}

找到了解决方案

问题在于html

部分

下拉列表只能显示

部分中存在的值

通过仅显示

未选择的用户

，下拉列表无法显示所选用户

我只需添加以下代码行：

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

{voter.user？.uid？{voter.user.username}:null}

在

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

选择投票者

useffect（（）=>{//您可以在此处更新状态，以便在组更改后始终触发，}，[groups]）@RohitKumar不幸的是，这没有帮助。组件中的

groups

状态将更新一级，这将使用更新的值自动重新呈现

VotingGroups

组件。

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