Как передать аргументы в callback функцию

Question

Есть компонент react App. Он принимает объект settingsObjс callbac функцией:

export const settingsObj = {
  handlers: {
    onClick: (e, dispatch) => {
      console.log('сработал клик из settingsObj', e);
      dispatch('привет из dispatch');
    }
  }
}

объединяет его функционал с функционалом callbac который находится в handlers внутри компонента App при помощи функции concatenatesEventHandlers и получившийся callbac присваивает кнопке button.

const concatenatesEventHandlers = (
  ownedEventHandlers,
  addedEventHandlers,
  dispatch
) => {
  const _ownedEventHandlers = { ...ownedEventHandlers };
  if (!addedEventHandlers || Object.keys(addedEventHandlers).length === 0) {
    return _ownedEventHandlers;
  }
  const keyAddedEventHandlers = Object.keys(addedEventHandlers);
  // функция объединяет функционал обработчиков (собственного и переданного eventHandlers)
  for (const handl in ownedEventHandlers) {
    if (ownedEventHandlers.hasOwnProperty(handl)) {
      for (let i = 0; i < keyAddedEventHandlers.length; i++) {
        if (handl === keyAddedEventHandlers[i]) {
          const concatFunc = (e, dispatch) => {
            ownedEventHandlers[handl]();
            addedEventHandlers[keyAddedEventHandlers[i]](e, dispatch);
          };
          _ownedEventHandlers[keyAddedEventHandlers[i]] = (e, dispatch) =>
            concatFunc(e, dispatch);
        } else {
          _ownedEventHandlers[keyAddedEventHandlers[i]] =
            addedEventHandlers[keyAddedEventHandlers[i]];
        }
      }
    }
  }
  return _ownedEventHandlers;
};

Код на codesandbox https://codesandbox.io/s/compassionate-sun-wgtn4h?file=/src/data.js

Проблема заключается в том, что когда я пытаюсь передать функцию для callbac из settingsObj, в данном случае dispatch, то она (dispatch) всегда undefined внутри callbac в объекте settingsObj. Подскажите пожалуйста где я ошибся?

PS ошибка появляется при клике на кнопку "кликни меня".

Answer 1

Если убрать лишний код станет заметно, что параметр dispatch нигде не используется

const concatenatesEventHandlers = (
  ownedEventHandlers,
  addedEventHandlers,
  dispatch
) => {
  ...
  const concatFunc = (e, dispatch) => {
    ownedEventHandlers[handl]();
    addedEventHandlers[keyAddedEventHandlers[i]](e, dispatch);
  };
  _ownedEventHandlers[keyAddedEventHandlers[i]] = (e, dispatch) =>
  concatFunc(e, dispatch);
  ...
};

Чтобы стало еще понятнее, достаточно переименовать параметр

const concatenatesEventHandlers = (
  ownedEventHandlers,
  addedEventHandlers,
  dispatch
) => {
  ...
  const concatFunc = (e, secondArg) => {
    ownedEventHandlers[handl]();
    addedEventHandlers[keyAddedEventHandlers[i]](e, secondArg);
  };
  _ownedEventHandlers[keyAddedEventHandlers[i]] = (e, secondArg) =>
  concatFunc(e, secondArg);
  ...
};

Для решения достаточно удалить лишний параметр из добавляемых обработчиков, в этом случае будет замыкаться параметр приходящий в функцию concatenatesEventHandlers

const concatenatesEventHandlers = (
  ownedEventHandlers,
  addedEventHandlers,
  dispatch
) => {
  ...
  const concatFunc = (e) => {
    ownedEventHandlers[handl]();
    addedEventHandlers[keyAddedEventHandlers[i]](e, dispatch);
  };
  _ownedEventHandlers[keyAddedEventHandlers[i]] = (e) =>
  concatFunc(e, dispatch);
  ...
};

БЛОГ НА HUSL

Как передать аргументы в callback функцию

Ответы (1 шт):