Правильно определенная функция Javascript иногда вызывает TypeError: "X" не является функцией

Question

У меня есть приложение React (^ 16.12.0). Я использую Chrome, но такая же ошибка возникает при использовании Firefox и на других машинах.

Вот ссылка на приложение: resume-designer.com . После нескольких нажатий на большую синюю кнопку Добавить вы в конечном итоге увидите в консоли следующую ошибку:

Uncaught TypeError: r[t] is not a function

Вот код, о котором идет речь:

// src/defaults/content.js

export const education = () => ({
  city: '',
  country: '',
  degree: '',
  description: emptyDesc(),
  id: shortid.generate(),
  school: '',
});

export const experiences = () => ({
  city: '',
  country: '',
  description: emptyDesc(),
  employer: '',
  id: shortid.generate(),
  position: '',
});

// src/actions/content.js

import * as defaults from '../defaults/content';

export const addItem = (event) => {
  const { section } = event.target.dataset;

  return {
    newItem: defaults[section](), // <-- This causes the problem (sometimes)
    path: section,
    type: 'ADD_ITEM',
  };
};

Чтобы увидеть, что происходит, я добавил оператор console.log(defaults[section]); в src/actions/content.js в строке 7, непосредственно перед оператором return. Щелчок четыре раза (это не всегда четыре) на упомянутой кнопке в конечном итоге вызвал ожидаемую ошибку. На скриншоте ниже мы видим, что для первых трех кликов функция правильно определена и вызвана, но для четвертого она теперь не определена (?) и вызывает ошибку. Обратите внимание, что если вы продолжаете нажимать, он начинает работать снова, затем падает, затем работает и т. Д. c.

Я попытался переместить education() и experiences() функции от src/defaults/content.js до src/actions/content.js, и я все еще получаю ту же ошибку.

Есть идеи? Может ли быть проблема с нехваткой памяти?

• Ссылка на приложение: https://resume-designer.com/.

Answer 1

вы слушаете события нажатия на кнопку, у которой есть дети. Дети также вызывают слушателя всплеском событий. В вашем случае у вас есть информация набора данных data-section на "внешнем элементе". Но поскольку иногда дети запускают событие, ваш event.target не является вашим ожидаемым «внешним элементом» (попробуйте щелкнуть текст, и ваша ошибка всегда появится)

Ваша проблема в строке const { section } = event.target.dataset;

Вы можете добавить CSS к дочерним элементам вашего внешнего элемента pointer-events: none;, когда клики по вашим дочерним элементам игнорируются. В качестве альтернативы вы можете убедиться в том, что отменили всплеск этого события у ваших детей, позвонив по номеру event.stopPropagation()

.