Увеличение функции Click Redux в массиве

Я работаю с некоторыми элементами svg, и я создал кнопку приращения.

Кнопка приращения принимает значения path d, преобразует их в массив и суммирует 5 из третьего элемента массива. Если элемент 'L' или 'M', он ничего не делает

Здесь функция click в редуксе, она принимает значения состояния приращения действия

  const a = action.index;
  let string = state[a].d;

Он преобразуется в массив

let array = string.split(" ");

а затем он выполняет все вычисления i, указанные в цикле

См. полную функцию редукции

  switch(action.type) {
    case 'INCREMENT_COORDINATES' :
      console.log("incrementing coordinaates")
      const a = action.index;
      let string = state[a].d;
      let array = string.split(" ");
      let max = array.length;
      let i = 3;
      let click = () => {
        i++;
        if ( i === max ) i = 3;
        if (array[i] !== 'M' && array[i] !== 'L') array[i] = parseInt(array[i]) + 5;
        array.join(' ');
      };
      return [
        ...state.slice(0,a), // before the one we are updating
        {...state[a], d: click()}, // updating the with the click function
        ...state.slice(a + 1), // after the one we are updating
      ]
    default:
      return state;
  }

Смотрите демонстрацию видео, пока я отлаживаю его http://www.fastswf.com/uSBU68E

Как вы можете видеть, код делает правильный расчет и суммирует 5 с четвертым элементом и возвращает номер 331. Так что все хорошо! Но проблема в том, что мне нужно вернуть его как '331', новый элемент массива, чтобы продолжить цикл.

Я создал демоверсию, которая отлично работает и делает то, что я хочу достичь, используя тот же код! Поэтому я не понимаю, что я делаю неправильно, когда применяю его в своей функции сокращения.

Смотрите jsBin, отлично работая, как я хочу.

Ответы

Ответ 1

EDITED:

  • Функция click не возвращает никакого значения, поэтому результат array.join(' ') не присваивается нигде, а свойство d остается неназначенным. 

    let click = () => {
  i++;
  if ( i === max ) i = 3;
  if (array[i] !== 'M' && array[i] !== 'L') array[i] = parseInt(array[i]) + 5;
  return array.join(' '); 
};

  • Каждый раз, когда вызывается действие increment_coordinates, выполняется весь код в блоке после case 'INCREMENT_COORDINATES' :. В этом случае важно, чтобы переменная i находилась в каждом вызове новая переменная, инициализированная с 3. Во время выполнения функции click i увеличивается до 4, а затем выходит из нее, поэтому ее значение теряется.

    Мое предложение состоит в том, чтобы включить текущий индекс в state (надеюсь, что это сработает, и я удалил функцию click, поскольку каждый вызов был повторно создан и только один раз был вызван)

    Не забудьте включить индекс также в строку, в которой вы впервые передаете свои координаты вашему редуктору или проверьте, содержит ли state[a] свойство index и устанавливает i=3, если нет.

    switch(action.type) {
case 'INCREMENT_COORDINATES' :
  console.log("incrementing coordinaates")
  const a = action.index;
  let string = state[a].d;
  let array = string.split(" ");
  let max = array.length;
  let i = (state[a].index || 3) + 1;
  if ( i === max ) i = 3;
  if (array[i] !== 'M' && array[i] !== 'L') array[i] = parseInt(array[i]) + 5;
  return [
    ...state.slice(0,a), // before the one we are updating
    {...state[a], d: array.join(' '); index: i}, // updating 
    ...state.slice(a + 1), // after the one we are updating
  ]
default:
  return state;
}