Groyreg
@Groyreg
Front-end

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

Есть визард с переключениями по шагам. К проекту подключен 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;
  }
}
  • Вопрос задан
  • 880 просмотров
Решения вопроса 1
0xD34F
@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),
    },
  }));
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
AlexanderBaranchugov
@AlexanderBaranchugov
Я такой
Используй findIndex:
const index = state.findIndex( ({stepConditions})=>
  stepConditions.active
);


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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы