Как удалить один элемент из массива, используя filter () в ReactJS - функция не работает должным образом

Question

У меня есть функция для удаления объекта рецепта из массива объектов рецептов.

Я действительно могу удалить рецепт (удалить его из массива recipeList), но когда я нажимаю одну кнопку удаления , он удаляет ВСЕ рецепты в массиве. Я хочу удалить только ту, на которую нажимаю.

Я почти уверен, что это как-то связано с this.state.id. Он появляется неопределенным, когда я его укажу. Он должен ссылаться на ключ / идентификатор удаляемого рецепта.

У кого-нибудь есть идеи, что может быть причиной проблемы?

Это функция удаления:

handleDeleteRecipe = recipeId => {
// copy current list of items
const recipeList = [...this.state.recipeList];

//filter out item being deleted
const filteredList = recipeList.filter(recipe => this.state.id !== recipeId);
this.setState({recipeList: filteredList});
console.log('id: ' + this.state.id);

}

В исходном состоянии id находится внутри объекта, называемого newRecipe, и для него установлено пустое значение:

this.state = {
  recipeList: [],
  newRecipe: {
    title: '',
    source: '',
    servings: '',
    id: ''
  }

У меня есть функция добавления новой рецептуры, в которой для id установлено значение случайное число от 1 до 1000. Не знаю, связано ли это с этим. Он находится внутри объекта newRecipe, который затем добавляется в массив recipeList.

handleAddNewRecipe = (title, source, servings, id) => {
const newRecipe = {
  title: title,
  source: source,
  servings: servings,
  id: (Math.floor(Math.random()* 1000))

Здесь каждый рецепт в массиве сопоставляется и возвращается как компонент. У него есть ключ, который установлен в recipe.id.

{this.state.recipeList.map((recipe) => (
          <RecipeCardThumbnail
          title={recipe.title}
          servings={recipe.servings}
          key={recipe.id}
          handleDeleteRecipe={this.handleDeleteRecipe}
          />
        ))}

Это кнопка удаления из дочернего компонента:

onClick={() => this.props.handleDeleteRecipe(this.props.id)}>Delete</button>

Очевидно, что-то я не понимаю, но я не уверен что. Любая помощь будет высоко ценится!

РЕДАКТИРОВАТЬ: я также попытался console.logging recipeList, когда я добавляю свой рецепт в массив, и идентификатор показывался очень хорошо. Поэтому я попробовал recipeList.id и возникла та же проблема со всеми удаляемыми рецептами.

ВНОВЬ РЕДАКТИРОВАТЬ: Я провел эксперимент и избавился от всего, что есть в функции удаления, кроме console.log. Я попытался войти recipeList, и все в объекте было там. Но когда я вошел в систему recipeList.id или даже recipeList.title, они оба показались как неопределенные. Я все еще не уверен, что я делаю неправильно, хотя ...

Answer 1

Ваш фильтр выглядит неправильно, вы никогда не используете объект рецепта, по которому вы фильтруете. Я бы предположил, что это должно быть recipeList.filter(recipe => recipe.id !== recipeId)

Кроме того, вам не нужно сначала копировать массив ... Array.filter все равно вернет новый массив

Answer 2

this.state.id вернет undefined, потому что у вас нет идентификатора непосредственно в вашем штате. попробуйте это

handleDeleteRecipe = recipeId => {
// copy current list of items
const recipeList = [...this.state.recipeList];

//filter out item being deleted
const filteredList = recipeList.filter(recipe => recipe.id !== recipeId);
this.setState({recipeList: filteredList});