Не удаляется элемент массива из дерева компонентов

@HitGirl · Регистрация: 08.10.2015

Студворк — интернет-сервис помощи студентам

Здравствуйте! Подскажите, пожалуйста, почему элемент не исчезает при удалении, dispatch отрабатывает правильно.

JavaScript
1
const myPrivateSettings = useSelector<RootState>(state => state.privateSettings.settings) as PrivateSettingsInterface

JavaScript
1
2
3
4
5
6
7
8
9
10
11
async function onRemoveUserFromWhiteListHandler(login: string) {
        const result = await SocketService.removeUserFromWhiteList(login, (response: SocketCallbackResponse) => {
            if (response.status == "SUCCESS") {
                dispatch(removeUserFromWhiteList(login))
                console.log(myPrivateSettings.white_list)
                popupRef.current.show("Пользователь удалён из белого списка!", "success", "")
            } else {
                popupRef.current.show(response.message, "error", "")
            }
        })
    }

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div className={classes.items_panel}>
                                            {(myPrivateSettings?.white_list ?? []).map(user => (
                                                <div key={user.login} className={classes.item}>
                                                    <svg aria-hidden="true" focusable="false" data-prefix="fas"
                                                         data-icon="user" role="img" xmlns="http://www.w3.org/2000/svg"
                                                         viewBox="0 0 448 512">
                                                        <path fill="currentColor"
                                                              d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"/>
                                                    </svg>
                                                    <h3 className={classes.header}>{user.login}</h3>
                                                    <div className={classes.user}>
                                                        <svg aria-hidden="true" focusable="false"
                                                             onClick={() => onRemoveUserFromWhiteListHandler(user.login)}
                                                             data-prefix="fas" data-icon="trash-can"
                                                             className="svg-inline--fa fa-trash-can" role="img"
                                                             xmlns="http://www.w3.org/2000/svg"
                                                             viewBox="0 0 448 512">
                                                            <path fill="currentColor"
                                                                  d="M32 464C32 490.5 53.5 512 80 512h288c26.5 0 48-21.5 48-48V128H32V464zM304 208C304 199.1 311.1 192 320 192s16 7.125 16 16v224c0 8.875-7.125 16-16 16s-16-7.125-16-16V208zM208 208C208 199.1 215.1 192 224 192s16 7.125 16 16v224c0 8.875-7.125 16-16 16s-16-7.125-16-16V208zM112 208C112 199.1 119.1 192 128 192s16 7.125 16 16v224C144 440.9 136.9 448 128 448s-16-7.125-16-16V208zM432 32H320l-11.58-23.16c-2.709-5.42-8.25-8.844-14.31-8.844H153.9c-6.061 0-11.6 3.424-14.31 8.844L128 32H16c-8.836 0-16 7.162-16 16V80c0 8.836 7.164 16 16 16h416c8.838 0 16-7.164 16-16V48C448 39.16 440.8 32 432 32z"></path>
                                                        </svg>
                                                    </div>
                                                </div>
                                            ))}
                                        </div>

@bodynar · 01.12.2021, 10:46

HitGirl, Самого метода удаления не приложили

Сообщение от HitGirl

useSelector<RootState>

- после удаления - что данный хук возвращает? Если смотреть через отладку

@HitGirl · 01.12.2021, 13:09 **[ТС]**

JavaScript
1
2
3
case REMOVE_USER_FROM_WHITE_LIST:
            state.settings.white_list = state.settings.white_list.filter(u=>u.login !== action.payload)
            return {...state}

JavaScript
1
2
3
console.log(myPrivateSettings.white_list)
                dispatch(removeUserFromWhiteList(login))
                console.log(myPrivateSettings.white_list)

Первый вывод: [{login: "test"}], второй: [];

Может из-за вложенности в другие компоненты. Если свернуть панель и развернуть, то элемент пропадает.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<SidePanel className={classes.settings_panel} isActive={isActiveSettingsPanel} setIsActive={setIsActiveSettingsPanel}>
                        <Tabs data={[{
                            tab: <div className={classes.header_panel}>
                                <h3 className={classes.header}>Общие</h3>
                            </div>,
                            content:
                                <div>
                                    <div className={classes.header_panel}>
                                        <h3 className={classes.header} >Кто может писать мне</h3></div>
                                    <RadioBtn checked={checkedRB==="ALL"} id={"ALL"} onClick={() => setTypePrivateSettings("ALL")}>Все</RadioBtn>
                                    <RadioBtn checked={checkedRB === "WHITE_LIST"} id={"WHITE_LIST"} onClick={() => setTypePrivateSettings("WHITE_LIST")}>Белый список</RadioBtn>
                                </div>
                        },
                            {
                                tab: <div className={classes.header_panel}>
                                    <h3 className={classes.header}>Белый</h3>
                                </div>,
                                content:
                                    <div>
                                        <div className={classes.header_panel}>
                                            <h2 className={classes.header}>Белый список: {(myPrivateSettings?.white_list ?? []).length}</h2>
                                            <div className={classes.buttons}>
                                                <svg onClick={() => setIsActiveAddUserToWhiteListPanel(!isActiveAddUserToWhiteListPanel)} aria-hidden="true"
                                                     focusable="false" data-prefix="fas" data-icon="plus"
                                                     className="svg-inline--fa fa-plus" role="img"
                                                     xmlns="http://www.w3.org/2000/svg"
                                                     viewBox="0 0 448 512">
                                                    <path fill="currentColor"
                                                          d="M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z"></path>
                                                </svg>
                                            </div>
                                        </div>
                                        <div className={classes.items_panel}>
                                            {(myPrivateSettings?.white_list ?? []).map(user => (
                                                <div key={user.login+user.login} className={classes.item}>
                                                    <svg aria-hidden="true" focusable="false" data-prefix="fas"
                                                         data-icon="user" role="img" xmlns="http://www.w3.org/2000/svg"
                                                         viewBox="0 0 448 512">
                                                        <path fill="currentColor"
                                                              d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"/>
                                                    </svg>
                                                    <h3 className={classes.header}>{user.login}</h3>
                                                    <div className={classes.user}>
                                                        <svg aria-hidden="true" focusable="false"
                                                             onClick={() => onRemoveUserFromWhiteListHandler(user.login)}
                                                             data-prefix="fas" data-icon="trash-can"
                                                             className="svg-inline--fa fa-trash-can" role="img"
                                                             xmlns="http://www.w3.org/2000/svg"
                                                             viewBox="0 0 448 512">
                                                            <path fill="currentColor"
                                                                  d="M32 464C32 490.5 53.5 512 80 512h288c26.5 0 48-21.5 48-48V128H32V464zM304 208C304 199.1 311.1 192 320 192s16 7.125 16 16v224c0 8.875-7.125 16-16 16s-16-7.125-16-16V208zM208 208C208 199.1 215.1 192 224 192s16 7.125 16 16v224c0 8.875-7.125 16-16 16s-16-7.125-16-16V208zM112 208C112 199.1 119.1 192 128 192s16 7.125 16 16v224C144 440.9 136.9 448 128 448s-16-7.125-16-16V208zM432 32H320l-11.58-23.16c-2.709-5.42-8.25-8.844-14.31-8.844H153.9c-6.061 0-11.6 3.424-14.31 8.844L128 32H16c-8.836 0-16 7.162-16 16V80c0 8.836 7.164 16 16 16h416c8.838 0 16-7.164 16-16V48C448 39.16 440.8 32 432 32z"></path>
                                                        </svg>
                                                    </div>
                                                </div>
                                            ))}
                                        </div>
                                    </div>
                            },
                            {
                                tab: <div className={classes.header_panel}>
                                    <h3 className={classes.header}>Чёрный</h3>
                                </div>,
                                content: <div>
                                    <div className={classes.header_panel}>
                                        <h2 className={classes.header}>Чёрный
                                            список: {(myPrivateSettings?.black_list ?? []).length}</h2>
                                        <div className={classes.buttons}>
                                            <svg onClick={() => setIsActiveAddUserToBlackListPanel(!isActiveAddUserToBlackListPanel)} aria-hidden="true"
                                                 focusable="false" data-prefix="fas" data-icon="plus"
                                                 className="svg-inline--fa fa-plus" role="img"
                                                 xmlns="http://www.w3.org/2000/svg"
                                                 viewBox="0 0 448 512">
                                                <path fill="currentColor"
                                                      d="M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z"></path>
                                            </svg>
                                        </div>
                                    </div>
                                    <div className={classes.items_panel}>
                                        {(myPrivateSettings?.black_list ?? []).map(user => (
                                            <div key={user.login} className={classes.item}>
                                                <svg aria-hidden="true" focusable="false" data-prefix="fas"
                                                     data-icon="user" role="img" xmlns="http://www.w3.org/2000/svg"
                                                     viewBox="0 0 448 512">
                                                    <path fill="currentColor"
                                                          d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"/>
                                                </svg>
                                                <h3 className={classes.header}>{user.login}</h3>
                                                <div className={classes.user}>
                                                    <svg aria-hidden="true" focusable="false"
                                                         onClick={() => onRemoveUserFromBlackListHandler(user.login)}
                                                         data-prefix="fas" data-icon="trash-can"
                                                         className="svg-inline--fa fa-trash-can" role="img"
                                                         xmlns="http://www.w3.org/2000/svg"
                                                         viewBox="0 0 448 512">
                                                        <path fill="currentColor"
                                                              d="M32 464C32 490.5 53.5 512 80 512h288c26.5 0 48-21.5 48-48V128H32V464zM304 208C304 199.1 311.1 192 320 192s16 7.125 16 16v224c0 8.875-7.125 16-16 16s-16-7.125-16-16V208zM208 208C208 199.1 215.1 192 224 192s16 7.125 16 16v224c0 8.875-7.125 16-16 16s-16-7.125-16-16V208zM112 208C112 199.1 119.1 192 128 192s16 7.125 16 16v224C144 440.9 136.9 448 128 448s-16-7.125-16-16V208zM432 32H320l-11.58-23.16c-2.709-5.42-8.25-8.844-14.31-8.844H153.9c-6.061 0-11.6 3.424-14.31 8.844L128 32H16c-8.836 0-16 7.162-16 16V80c0 8.836 7.164 16 16 16h416c8.838 0 16-7.164 16-16V48C448 39.16 440.8 32 432 32z"></path>
                                                    </svg>
                                                </div>
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            }
                        ]}/>
                    </SidePanel>

Добавлено через 2 часа 12 минут
Решение:

JavaScript
1
2
3
case REMOVE_USER_FROM_WHITE_LIST:
            state.settings.white_list = state.settings.white_list.filter(u=>u.login !== action.payload)
            return {...state, settings: {...state.settings}}

Новые блоги и статьи Все статьи Все блоги /
Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .
Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .	Отправка уведомления на почту при изменении наименования справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере изменения наименования типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной. . .	модель ЗдравоСохранения 5. Меньше увольнений- больше дохода! anaschu 24.03.2026 Теперь система здравосохранения уменьшает количество увольнений. 9TO2GP2bpX4 a42b81fb172ffc12ca589c7898261ccb/ https:/ / rutube. ru/ video/ a42b81fb172ffc12ca589c7898261ccb/ Слева синяя линия -. . .	Midnight Chicago Blues kumehtar 24.03.2026 Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .