handleRemoveItem(id) {
        const newResList = this.state.resolutions;

        function del(_i) { 
            delete newResList[_i];
        }

        let filtered = [];
        for(let i = 0; i < newResList.length; i++) {
            if(newResList[i].k === id) {
                let el = document.getElementById(newResList[i].title + newResList[i].k);
                //el.classList.remove('animate__fadeInDown');
                //el.classList.add('animate__fadeOutLeft');
                console.log(el);
                del(i); // delete newResList[i]
            }
        }
        filtered = newResList.filter(function(el) {
            return el != null;
        });
        console.log(filtered);
        this.setState({resolutions: filtered});
    }

Привет! Итак, я работаю над этим списком в реакции: когда я добавляю два элемента в свой список и удаляю первый добавленный, он печатает другой элемент, оставшийся в списке. Это нормально? «id» применяется при создании элемента списка и содержит заголовок + уникальный идентификатор, примененный к объекту.

Нельзя сказать, что удаление элемента списка не работает, но я закомментировал добавление / удаление классов в этом коде, потому что он применяется не к тому элементу!

Любая помощь приветствуется


0
Ben Lusted 28 Ноя 2021 в 01:49
Привет, когда вы работаете с React, вам не нужно напрямую взаимодействовать с DOM. Это делается с помощью реакции.
 – 
Antonio Pantano
28 Ноя 2021 в 01:53
Во-первых, не используйте оператор удаления для элементов массива. Это не то, как это работает в JS - просто прочитайте базовую справку JS о встроенных методах Arrays. Во-вторых, никогда не изменяйте состояние реактивного компонента - вместо этого вы должны установить новое состояние.
 – 
B_Joker
28 Ноя 2021 в 02:01
При работе в React вы почти никогда не используете методы запроса dom. Вы изменяете данные в состоянии, которое response использует для рендеринга dom. Вам нужно будет серьезно изменить то, как вы думаете о приложении React
 – 
charlietfl
28 Ноя 2021 в 02:08

1 ответ

Лучший ответ

При работе с React существует виртуальная модель DOM, которая обрабатывает все id и вызовы функций с помощью логики реакции.

Если вы хотите, например, выбрать элемент, в этом нет необходимости. Вызов функции непосредственно из самого элемента с атрибутом onClick, и когда другие элементы зависят от этого изменения, введите состояние, которым вы затем манипулируете.

Больше в React Doc: https://reactjs.org/

0
Felix 28 Ноя 2021 в 01:57
Что ж, кнопка для удаления элемента списка - это
 – 
Ben Lusted
28 Ноя 2021 в 02:02
Я рекомендую прочитать об архитектуре потока, которая используется в React. Короче говоря, вы обычно передаете функцию-обработчик от родительского элемента к дочернему. Затем вы запускаете его с помощью функции обработчика кликов дочернего элемента
 – 
B_Joker
28 Ноя 2021 в 02:06