Реагировать - удалить элемент вложенного массива с помощью вызова функции setState - PullRequest
Новая
       23

Реагировать - удалить элемент вложенного массива с помощью вызова функции setState

0 голосов
/ 09 апреля 2019

Я пытаюсь удалить (полу) глубоко вложенный элемент из массива, используя setState, но он, похоже, не работает.Мое состояние структурировано следующим образом: 

state = {
  currentSeries: null,
  currentRowIndex: null,
  rows: [
    {
      id: shortid.generate(),
      nodes: [], 
      series: [], // array with item I want to remove
    },
  ],
};

и мой вызов удаления элемента: 

onRemoveModelElementClick = (rowId, modelElementId) => {
  this.setState((prevState) => {
    const index = prevState.rows.findIndex(x => x.id === rowId);
    const series = prevState.rows[index].series.filter(s => s.id !== modelElementId);
    return series;
  });
};

Я попытался распространить оставшееся состояние несколькими способами, но, похоже, оно не обновляется должным образом.I rowId и modelElementId верны, и я могу убедиться, что они отфильтровывают правильный элемент.У меня просто проблемы с тем, что вернуть.Я знаю, что это что-то простое, но для жизни я не вижу этого.

Ответы [ 3 ]

1 голос
/ 09 апреля 2019

Я бы порекомендовал использовать .map, чтобы было легче переваривать вещи.Затем вы можете написать это так: 

onRemoveModelElementClick = (rowId, modelElementId) => {
  const updatedRowsState = this.state.rows.map(row => {
    // this is not the row you're looking for so return the original row
    if (row.id !== rowId) {
      return row;
    }

    const filteredSeries = row.series.filter(s => s.id !== modelElementId);
    return {
      // spread properties (id, node, series)
      ...row,
      // overwrite series with item filtered out
      series: filteredSeries,
    };
  });

  // since rest of the state doesn't change, we only need to update rows property
  this.setState('rows', updatedRowsState);
}

Надеюсь, это поможет, и дайте мне знать, если у вас есть какие-либо вопросы.

0 голосов
/ 10 апреля 2019

Вот что я сделал, чтобы заставить его работать в случае, если это может помочь кому-то еще: 

onRemoveModelElementClick = (rowId, modelElementId) => {
  this.setState((prevState) => {
    const updatedRowState = prevState.rows.map((row) => {
      if (row.id !== rowId) {
        return row;
      }

      const filteredSeries = row.series.filter(s => s.id !== modelElementId);
      return {
        ...row,
        series: filteredSeries,
      };
    });
    return {
      rows: updatedRowState,
    };
  });
};

Все заслуги перед Домом за отличную идею и логику!

0 голосов
/ 09 апреля 2019

Я думаю, что проблема в том, как ваш код использует setState.Функция setState должна возвращать объект.Предполагая, что ваши функции фильтрации верны, как вы описали, верните объект для обновления состояния: 

return { series };

setState документация

...