Работа push in реакции при использовании приставки для обновления состояния

Question

Следующий код - это код моего редуктора, где я вызываю эти функции в моем контейнере

const intialState = {
  counter: 0,
  results: []
};

const reducer = (state = intialState, action) => {
  switch (action.type) {
    case "INCREMENT":
      return {
        ...state,
        counter: state.counter + 1
      };

    case "STORE_RESULT": {
      return {
        ...state,
        results: state.results.push(state.counter)
      };
    }
  }
  return state;
};

export default reducer;

Я получаю следующую ошибку

TypeError: state.results.push is not a function
reducer

1) Я использую избыточностьредуктор в моем проекте

2) Я обновляю состояние, передавая тип из моей отправки в мой контейнер

3) Я пытаюсь обновить массив нажатием (я знаю, он возвращаетдлина), но я хочу знать, почему он не работает

4) После кода, который я попробовал в JavaScript, все работало нормально

var a = {
b:[]
}
a.b.push(11)
//output
1

Answer 1

возвращаемое значение из .push равно

Новое свойство длины объекта, для которого был вызван метод.

длядобавьте значение к stae.results используйте concat или синтаксис распространения :

case "STORE_RESULT": {
  return {
    ...state,
    results: [...state.results, state.counter]
  };
}

Answer 2

push возвращает новый length из mutated array.Вместо этого используйте concat, который возвращает новый массив

results : state.results.concat(item)

Предположим, что следующий код

results : state.results.push('foo')

Предполагая, что results имеет length из 5, вышекод будет утвержден как

results : 5

В следующий раз, когда вы попытаетесь push results, это будет выглядеть как ваш компилятор

5.push('foo')

Answer 3

Вы должны добавить регистр по умолчанию в переключателе редуктора.

и использовать [...state.results, state.counter] вместо state.results.push(state.counter).

, как это

const intialState = {
  counter: 0,
  results: []
};

const reducer = (state = intialState, action) => {
  switch (action.type) {
    case "INCREMENT":
      return {
        ...state,
        counter: state.counter + 1
      };

    case "STORE_RESULT": {
      return {
        ...state,
        results: [...state.results, state.counter] // here
      };
    default:
      return state; // here
    }
  }
};

export default reducer;