Как получить доступ к предыдущему или следующему элементу из коллбека метода map?

Question

[Gregory]

Есть визард с переключениями по шагам. К проекту подключен redux store. В нем есть вот такой массив:

const initialState = [
  {
    id: 0,
    stepTitle: 'Параметры кредита',
    formName: 'firstForm',
    fields: [],
    stepConditions: {
      valid: false,
      error: false,
      active: true
    }
  },
  {
    id: 1,
    stepTitle: 'Данные компании',
    formName: 'secondForm',
    fields: [],
    stepConditions: {
      valid: false,
      error: false,
      active: false
    }
  },
  {
    id: 2,
    stepTitle: 'Руководитель и учредители',
    formName: 'thirdForm',
    fields: [],
    stepConditions: {
      valid: false,
      error: false,
      active: false
    }
  }
];

Я хочу вызвать экшен без параметров для включения например следующего шага визарда, для этого мне нужно пройтись в сторе по массиву найти у какого объекта stepConditions.active === true ему поставить false, а следующему объекту в stepConditions.active выставить true.

Как правильно это сделать вот кусок, который я написал, но не могу придумать, как поменять active у следующего элемента:

export default function expressCredits(state = initialState, action) {
  switch (action.type) {
    case OPEN_NEXT_EXPRESS_FORM_STEP:
      return [
        ...state.map( field => {
          const {
            stepConditions: { active }
          } = field;
          
          if (active) {
            return {
              ...field,
              stepConditions: { ...field.stepConditions, active: false }
            };
          }

          return { ...field };
        })
      ];
    default:
      return state;
  }
}

Comments

[Lynn «Кофеман»]

У колбека map вообще-то аж три параметра. Второй из них это как раз индекс текущего элемента.

[Роман]

А третий это исходный массив, соответственно:

list.map((value, index, array)=>{
  //предыдущий элемент (если существует)
  array[index-1]

  // текущий элемент
  value

  //следующий элемент (если существует)
  array[index+1]

});

Answer 1

[0xD34F]

нужно пройтись в сторе по массиву найти у какого объекта stepConditions.active === true ему поставить false, а следующему объекту в stepConditions.active выставить true

Если активен может быть только один элемент - наверное, не надо указывать активность каждого элемента, храните отдельно индекс активного. Разве так не будет проще?

Ну а отвечая непосредственно на ваш вопрос:

case OPEN_NEXT_EXPRESS_FORM_STEP:
  const active = 1 + state.findIndex(n => n.stepConditions.active);
  return active ? state.map((n, i) => ({
    ...n,
    stepConditions: {
      ...n.stepConditions,
      active: i === active,
    },
  })) : state;

или

case OPEN_NEXT_EXPRESS_FORM_STEP:
  return state.map((n, i, arr) => ({
    ...n,
    stepConditions: {
      ...n.stepConditions,
      active: !!(i && arr[i - 1].stepConditions.active),
    },
  }));

Comments

[Gregory]

0xD34F, большое спасибо :)

Answer 2

[Александр Баранчугов]

Используй findIndex:

const index = state.findIndex( ({stepConditions})=>
  stepConditions.active
);

Потом проставь active = false;
state[index]stepConditions.active = false;

Потом найди элемент индекс которого равен index + 1 и присвой
state[index+1]stepConditions.active = true;