Как удалить элемент с помощью filter() (reactjs)
Я хотел бы удалить элемент из списка элементов с помощью filter().
Функция удаления элемента находится в родительском компоненте, который я затем вызываю в дочернем компоненте.
вот функция родительского компонента:
deletePlayer = (id) => {
const teamPlayers = this.state.teamPlayers
teamPlayers.filter(i => i.idTeam !== id)
console.info('my players: ', teamPlayers);
}
Я передаю эту функцию в реквизите:
<//other props...
strNationality = {player.strNationality}
deletePlayer = {(id) => this.deletePlayer(id)}
/>
))
Я получаю это от своего ребенка:
deletItem = (e, id) => {
console.info('mes propos player: ', this.props.idPlayer);
this.props.deletePlayer(id)
}
и вот как я запускаю событие:
<Button
onClick = { () => this.deletItem(this.props.idPlayer) }
className='button'
color='black'
type='submit'>
Я получаю правильный идентификатор, но filter() никогда не фильтрует и находит все мои объекты. Как будто он игнорирует !== идентификатор
Как я могу это сделать?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Эта строка является проблемой:
teamPlayers.filter(i => i.idTeam !== id)
filter возвращает массив новый после завершения итераций, он не выполняет фильтрацию на месте. Вам нужно присвоить этот отфильтрованный массив новой переменной. Поскольку filter не мутирует исходный массив состояний, вы можете просто запустить процесс, чтобы получить новый отфильтрованный массив, который затем можно вывести на консоль.
const teamPlayers = this.state.teamPlayers.filter(i => i.idTeam !== id));
console.info('my players: ', teamPlayers);
Является ли idTeam в состоянии целым числом или строкой? Значение из компонента представляет собой строку, поэтому вам, возможно, придется привести ее к другому типу.
Приведенный выше ответ правильный, но в контексте реакции вы можете сделать это:
deletePlayer = id => {
this.setState({
teamPlayers: this.state.teamPlayers.filter(
player => player.idTeam !== id,
),
});
};
Проблема в том, что вы не обновляете состояние с помощью setState...
Вы не обновляете состояние teamPlayers, если вы используете функциональный компонент и useState, то я бы рекомендовал это.
deletePlayer = (id) => {
setTeamPlayers(prevTeamPlayers =>prevTeamPlayers.filter(teamPlayer => teamPlayer.idTeam !== id))
}
нет, я пытался, у меня есть журнал, так как мой ребенок с хорошим идентификатором, но фильтр возвращает мне таблицу с этим элементом в ней