Material UI - 数组在 onChange 事件后重置为 0 个元素。 （文本字段组件）

Question

我目前正在构建一个应用程序，我希望人们从用户列表中选择他们想要与之创建群组聊天室的用户。之后，我有一个文本字段，允许他们为其组设置名称。

问题： textfield 的 onChange 事件似乎在键入时将数组重置为 0 个元素。请参阅下面的 GIF。

有人遇到过这样的事情吗？我将在下面粘贴我的相关代码片段。

return (
        <div>
            <Dialog
                open={MultiplelistClick}
                keepMounted
                className='grpchatDialog'
                onClose={() => setMultiplelistClick(false)}
                aria-describedby="alert-dialog-slide-description"
                fullWidth
                maxWidth="xl"
            >
                <DialogTitle className='dialogTitle'>{"Choose users"}</DialogTitle>
                <DialogContent>
                    <DialogContentText className="dialog-information">
                        2 minimum users required here.
                    </DialogContentText>
                </DialogContent>
                {

                    userData && userData.filter((val: any) => {
                        return (searchTerm === '' && (val.id != myIdNumber) || (val.firstName.toLowerCase().includes(searchTerm.toLocaleLowerCase()) && (val.id != myIdNumber)));
                    }).map((user: UserModel) => {
                        return <li key={user.id}>
                            <img className='liAvatar' src={placeholderimg} alt='xx' />
                            <p className='nameDisplay'onClick={() => createChatRoom(user)}> {user.firstName} {user.lastName}</p>
                            <Checkbox value={user.id} onClick={() => CheckBoxEvent(user.id)} className='myCheckBox' />
                        </li>
                    })
                }
                <TextField
                    label='Give your group a name.'
                    variant='outlined'
                    rows={1}
                    className='grpNameInput'
                    onChange={(e) => setGroupName(e.target.value)}
                />
                <DialogActions>
                    <Button onClick={() => CreateGroupChatRoom(GroupChatList)}>Skapa Chattrum</Button>
                </DialogActions>
            </Dialog>
        </div>

更新：我验证了它实际上是我的TextField中的onChange输入事件，将我当前的用户ID数组重置为0。请在此处查看GIF：https://gyazo.com/f306b6907ca755ad07fa13b542b87d27

对于任何想知道我的事件如何将用户 ID 推入数组的人，以下是该事件：

const CheckBoxEvent = (userid: number) => {
    if (!GroupChatList.includes(userid)) {
        GroupChatList.push(userid); console.log(GroupChatList)
   }
    else {
            var index = GroupChatList.indexOf(userid);
            GroupChatList.splice(index, 1);
    }
}

Answer 1

React 频繁重新渲染组件。通过重新渲染，特别是对于功能组件，我们的意思是：“运行函数”...它每次都会重新创建声明的变量和函数。因此，当组件重新呈现时，GroupChatList 是一个新变量，重置为组件内的代码所说的任何内容。

要跨渲染维护变量中的值，请使用 useState 挂钩将变量置于“状态”中。

另外，当你使用“设置状态函数”来更新状态变量中的值时，这会触发 React 需要重新渲染组件（因为“状态中的信息已更改”）。