Как правильно удалять нужный элемент из массива?

Question

[sergemin]

Добрый день!
Работаю сейчас с Redux и не получается правильно удалить нужный элемент из массива.
Допустим, у меня есть массив, который хранится в store. Этот массив map'ом выводится в виде списка. Каждый элемент списка имеет кнопку удаления, на который я повесил обработчик и колбэком передаю его индекс

removeStudent(index) {
        this.props.onRemoveStudent(index);
    }
render() {
return (
{this.props.studentsStore.studentsList.map((item, index) =>
                                <tr className="itemStudent" key={index}>
                                    <td><input type="text" defaultValue={item.name} /></td>
                                    <td><input type="text" defaultValue={item.surname} /></td>
                                    <td>{item.gender}</td>
                                    <td><input type="text" defaultValue={item.age} /></td>
                                    <td>{item.isMarried + ''}</td>
                                    <td><button id="remove" onClick={() => this.removeStudent(index)}>X</button></td>
                                </tr>
                            )}
)
}

А вот написать нужный редьюсер не получается
С добавлением понятно, там просто вставить в конец массива еще один элемент. А вот удалить...

export default connect(
    state => ({
        studentsStore: state
    }),
    dispatch => ({
     
        onRemoveStudent: (index) => {
            dispatch({ type: 'REMOVE_STUDENT', payload: index })
        }
    })

В общем, вот мой редьюсер

export default function studentsList(state = initialState, action) {
    if(action.type === 'ADD_STUDENT') {
        return [
            ...state,
            action.payload
        ]
    }
    if(action.type === 'REMOVE_STUDENT') {
        let newArr = state;
        newArr.splice(action.payload, 1);
        return newArr.filter(element => element !== action.payload);
    }
    return state;
}

Сейчас удаляется только последний элемент, вне зависимости от того, на каком элементе был клик
Подскажите, пожалуйста

Answer 1

[Максим]

Так как вам всегда нужно возвращать новый массив, задачу можно разделить следующим образом:
1) в новый массив копируете* все с начала до index
2) в этот же новый массив копируете все с index+1 до конца

* - для копирования отлично подходит spread operator. В теории выглядит так:

const arr = [{a:1},{b:2},{c:3},{d:4}]
//допустим, вы прислали index 1 и сохранили его в переменную index, например
const newArr = [
  ...arr.slice(0, index), // клонируем все элементы до индекса
  ...arr.slice(index+1), // клонируем все элементы после индекса
  // итого: индексный элемент удален
]

Хазрат Гаджикеримов вам верно подсказал так же про filter. В комментарии привел верное решение. Давайте теперь рассмотрим ваше:

if(action.type === 'REMOVE_STUDENT') {
        let newArr = state; // сохранили в newArr ссылку(!!!) на старый массив. Если вы хотели скопировать массив, то нужно было писать: let newARr = [...state] (если в state просто массив)
        newArr.splice(action.payload, 1); // здесь вы из newArr ( и из state, так как сохранили ссылку) удалили с ИНДЕКСА один элемент. Так же, внимание, вы используете sPlice, а не slice. Разницу нужно уточнить! (подсказка ниже как)
        return newArr.filter(element => element !== action.payload); // а здесь вы что вообще написали? вы сравнили element (что там? объект?) с action.payload (в которой как вы говорите индекс). Что должно быть в итоге? ;)
    }

Очень легко гуглить все незнакомые функции по типу: name MDN
в вашем случае запросы в гугл:
slice MDN (первая ссылка выдачи)
filter MDN (первая ссылка выдачи)

Теория из-за которой не происходит понимания: копирование объектов по ссылке

Comments

[sergemin]

Отлично, попробую! Спасибо за идею!
А почему не работает splice в данном случае? Я же копирую массив, удаляю из него лишний элемент и возвращаю результат. В чем беда?

[Максим]

sergemin, вы не копируете массив. Вы копируете ссылку на него, это раз. Во-вторых, sPlice не создает новый массив, он изменяет старый - это два. Почитайте комментарий к вашему коду в моем ответе (я обновил). А потом идете на MDN и смотрите в чем разница между slice и splice. Ну и в конце концов, самое важное для понимания сейчас это копирование объектов по ссылке.

Answer 2

[Хазрат Гаджикеримов]

Ты модифицируешь state, так как массивы передаются по ссылке, по-моему filter() достаточно и нет необходимости в splice

Comments

[sergemin]

Дело в том что код не реагирует на мой фильтр
Если убрать splice, то вообще не происходит удаление элемента

[Хазрат Гаджикеримов]

попробуйте так:

const items = state.filter((item, i) => i !== action.payload)
retturn state

а так же советую посмотреть тип action.payload, вдруг там sting а вы сравниваете без приведения типа, что хорошо

[Максим]

Хазрат Гаджикеримов у вопрошающего сразу 2 проблемы: он и массив по ссылке скопировал, и метод использует splice, а не slice. Про фильтр - все четко.

[sergemin]

Максим, да, я просто корректировал код и забыл вернуть slice
Изначально так было
let newArr = state.slice();
То есть я копировал массив, а не ссылку

[sergemin]

Максим, понял. Прочитал пояснения! Спасибо за помощь!

[Максим]

sergemin, ок! Главное, что разобрались.

[sergemin]

Максим, я сейчас перечитал Ваши ответы. Дело в том, что как я уже написал, это просто была опечатка. Ко модифицировал несколько раз и забыл про slice. Все, что Вы объяснили я знаю и про копирование по ссылке и про то, что возвращают методы slice, а что splice
У меня был вопрос, почему не работает такой код в данном случае?

let a = [1,2,3,4,5];
let b = a.slice(); //клонирую массив
b.splice(1,1); //удаляю 1 элемент, начиная с позиции 1
alert(b) // [1,3,4,5]
return b // возвращаю то, что осталось от b

я же не так делал:

let a = [1,2,3,4,5];
let b = a.slice();
let c = b.splice(1,1);
return c // если так, то конечно, получается, что возвращаю тот элемент, который я удалил из склонированного массива

Или так нельзя пользоваться методом splice?

[Максим]

sergemin, судя по коду вопроса, вы делали так:

newArr.splice(action.payload, 1);
 return newArr.filter(element => element !== action.payload);

здесь я уже описал, в чем дело. Какой смысл в строке с фильтром? Зачем сравнить element с aciton.payload, если по логике в element у вас объект student, а в action.payload - индекс?
Вы сравнивате, грубо говоря { name: 'Vasya', lang: 'js'} !== 1
Конечно не ровно. Вам вопрос: что в этом случае вернет filter? (либо более формализованный вопрос: что вернет функция filter если не один элемент не удовлетворяет условию)

Код, что вы привели про slice и splice - рабочий.

let a = [1,2,3,4,5];
let b = a.slice(); //клонирую массив
b.splice(1,1); //удаляю 1 элемент, начиная с позиции 1
alert(b) // [1,3,4,5]
return b // возвращаю то, что осталось от b

[sergemin]

Максим, да, спасибо, фильтр просто бездумно копипастнул из интернета и забыл его убрать.
Сейчас пытаюсь использовать этот свой подход

if(action.type === 'REMOVE_STUDENT') {
        let newArr = state.slice();
        newArr.splice(action.payload, 1);
        return newArr;
    }

Но все равно почему-то как бы я элемент не удалял, удаляется последний элемент

[Максим]

sergemin, вы проверяйте, что вы передаете в action.payload, может вы индекс всегда передаете последнего элемента.

[sergemin]

Максим, вроде бы нормально передаю

removeStudent(index) {
        this.props.onRemoveStudent(index); // вот этот индекс 
}
render() {
return (
{this.props.studentsStore.studentsList.map((item, index) =>
       <tr className="itemStudent" key={index}>
              <td><input type="text" defaultValue={item.name} /></td>
              <td><input type="text" defaultValue={item.surname} /></td>
              <td>{item.gender}</td>
              <td><input type="text" defaultValue={item.age} /></td>
              <td>{item.isMarried + ''}</td>
              <td><button id="remove" onClick={() => this.removeStudent(index)}>X</button></td> //в колбэке передал индекс
       </tr>
)}
)
}

[Максим]

sergemin, значит ищите ошибку дальше. Нужно по шагам, начиная с того что приходит в редьюсер, что вы из него "выдаете", что приконнекчиваете в компонент, что рендерите - каждый шаг по очереди покрываете в console.log / debugger и смотрите.

[sergemin]

Максим, понял, огромное спасибо за помощь!

Answer 3

[Александр Золотарев]

На сколько я понял у вас проблема со сравнением двух объектов. filter не считает их одинаковыми, почитайте про сравнение объектов в javascript

Comments

[Александр Золотарев]

Как альтернатива, можно сравнивать id у объектов