javascript - 正确定义的 Javascript 函数有时会导致 TypeError：“X”不是函数

问题描述

我有一个 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',
  };
};

为了查看发生了什么，我在第 7 行添加了console.log(defaults[section]);语句src/actions/content.js，就在return语句之前。在提到的按钮上单击四次（并不总是四次）最终导致了预期的错误。在下面的屏幕截图中，我们看到，对于前三次单击，该函数被正确定义和调用，但对于第四次，它现在是 undefined () 并导致错误。请注意，如果您继续单击，它会再次开始工作，然后崩溃，然后工作，等等。

我尝试将education()andexperiences()函数从src/defaults/content.jsto移动src/actions/content.js，但仍然出现相同的错误。

任何想法？会不会是内存不足的问题？

应用程序链接：https ://resume-designer.com/ 。

标签： javascriptreactjswebpack

您正在收听有孩子的按钮上的点击事件。孩子们也通过事件冒泡来触发监听器。在您的情况下，您拥有data-section“外部元素”的数据集信息。但是因为有时孩子触发事件，你event.target不是你预期的“外部元素”（尝试点击文本，你的错误总是会出现）

你的问题是在线const { section } = event.target.dataset;

您可以将 CSS 添加到外部元素的子元素中，这样子元素的pointer-events: none;点击就会被忽略。或者，您可以通过调用确保取消对孩子的事件冒泡event.stopPropagation()

javascript - 正确定义的 Javascript 函数有时会导致 TypeError：“X”不是函数

问题描述

解决方案

推荐阅读