Почему геттер не возвращает значение

Question

У меня есть геттер, который возвращает массив объектов.Проблема в том, что мне нужны прошлые и фактические предупреждения в разных компонентах.

Он возвращает только фактическое предупреждение и игнорирование прошлого.Но когда я удаляю метод карты, он работает правильно.

PS Я пытался разделить этот геттер на два геттера

getPastOrActualWarnings: state => type => {
    const now = +new Date()
    let warnings
    if (type === 'actual') {
        warnings = state.warnings.filter(item => item.time * UNIX_TIMESTAMP > now)
    } else if (type === 'past') {
        warnings = state.warnings.filter(item => item.time * UNIX_TIMESTAMP < now)
    } else {
        warnings = []
    }

    return warnings.map(dateToString)
}

function dateToString (item) {
    item.time = new Date(item.time * UNIX_TIMESTAMP).toLocaleDateString('ru-RU', DATE_OPTIONS)
    return item
}

Answer 1

Проблема в том, что вы изменяете состояние напрямую с помощью своего геттера, что вам никогда не следует делать.Следующая строка изменяет item.time, который вы ранее использовали для сортировки элементов.item является ссылкой на объект, который хранится в состоянии.

item.time = new Date(item.time * UNIX_TIMESTAMP).toLocaleDateString('ru-RU', DATE_OPTIONS)

Чтобы решить проблему, вы можете сделать одно из двух:

• Используйте другое имя для отображаемого времени

  item.renderedTime = new Date(item.time * UNIX_TIMESTAMP).toLocaleDateString('ru-RU', DATE_OPTIONS)
  

• (мелкая) копия элемента, поэтому вы изменяете локальную копию, а не копию в состоянии

  function dateToString(item) {
    const localItem = { ...item };
    localItem.time = new Date(item.time * UNIX_TIMESTAMP).toLocaleDateString(
      "ru-RU"
    );
    return localItem;
  }