0

Есть компонент 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 ошибка появляется при клике на кнопку "кликни меня".

4
  • в коде по ссылке не задан settingsObj
    – Grundy
    25 дек 2022 в 15:21
  • Спасибо что подсказали. Заменил ссылку. Сейчас все норм. 26 дек 2022 в 3:13
  • Добавь в вопрос код функции concatenatesEventHandlers
    – Grundy
    26 дек 2022 в 3:24
  • Код добавил. Так же он ещё представлен на codesandbox по ссылке 26 дек 2022 в 3:35

1 ответ 1

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);
  ...
};
1
  • Благодарю за помощь. Твой ответ мне очень помог. 26 дек 2022 в 16:43

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.