未捕获的错误:不变违规:元素类型无效:应为字符串 [英] Uncaught Error: Invariant Violation: Element type is invalid: expected a string

查看:19
本文介绍了未捕获的错误:不变违规:元素类型无效:应为字符串的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

  • 我正在尝试调试我的 React 代码.
  • 在我的渲染方法中,我尝试放置调试器和调试器.
  • 在我跳过 retun 方法后,它会转到 warning.js.
  • 在我跳过warning.js 后,如果有条件,它会实例化ReactComponent.js
  • 我不知道为什么它会转到不同的文件.你能告诉我为什么它会转到不同的文件.
  • 不确定如何调试.
  • 如果你们能给我一些解释,这样我就可以自己修复错误,那就太好了
  • 提供每次执行函数调用的代码片段

  • i am trying to debug my react code.
  • in my render method I try to put debugger and debugger.
  • after I step over retun method its going to warning.js.
  • after I step over warning.js if conditions its going to instantiateReactComponent.js
  • I am not sure why its going to different files. can you tell me why its going to different files.
  • not sure how to debug.
  • it would be great if you guys give me some explaination so that in future I can fix the error my self
  • providing the snippet of the code where it goes in step over function call each time

错误invariant.js?f23e:39 未捕获的错误:不变冲突:元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件)但得到:未定义.检查sports-container的render方法.

error invariant.js?f23e:39 Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of sports-container.

渲染(){const {sportsType,sportsDevice,sportsWordings,id } = this.props;让sportsEvent = true;

render() { const { sportsType, sportsDevice, sportsWordings, id } = this.props; let sportsEvent = true;

    debugger;

    if (sportsEvent === true) {
        return (

warning.js

/*** 与 invariant 类似,但仅在不满足条件时记录警告.* 这可用于在关键的开发环境中记录问题* 路径.删除生产环境的日志代码将保留* 相同的逻辑并遵循相同的代码路径.*/

/** * Similar to invariant but only logs a warning if the condition is not met. * This can be used to log issues in development environments in critical * paths. Removing the logging code for production environments will keep the * same logic and follow the same code paths. */

var warning = emptyFunction;

if (process.env.NODE_ENV !== 'production') {
  warning = function (condition, format) {
    for (var _len = arguments.length, args = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
      args[_key - 2] = arguments[_key];
    }

    if (format === undefined) {
      throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument');
    }

    if (format.indexOf('Failed Composite propType: ') === 0) {
      return; // Ignore CompositeComponent proptype check.
    }

    if (!condition) {
      var argIndex = 0;
      var message = 'Warning: ' + format.replace(/%s/g, function () {
        return args[argIndex++];
      });
      if (typeof console !== 'undefined') {
        console.error(message);
      }
      try {
        // --- Welcome to debugging React ---
        // This error was thrown as a convenience so that you can use this stack
        // to find the callsite that caused this warning to fire.
        throw new Error(message);
      } catch (x) {}
    }
  };
}

instantiateReactComponent

  instance.construct(node);

/*** 给定一个 ReactNode,创建一个将实际挂载的实例.** @param {ReactNode} 节点* @return {object} 元素构造函数的新实例.* @保护*/

/** * Given a ReactNode, create an instance that will actually be mounted. * * @param {ReactNode} node * @return {object} A new instance of the element's constructor. * @protected */

function instantiateReactComponent(node) {
  var instance;

  if (node === null || node === false) {
    instance = new ReactEmptyComponent(instantiateReactComponent);
  } else if (typeof node === 'object') {
    var element = node;
    !(element && (typeof element.type === 'function' || typeof element.type === 'string')) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'Element type is invalid: expected a string (for built-in components) ' + 'or a class/function (for composite components) but got: %s.%s', element.type == null ? element.type : typeof element.type, getDeclarationErrorAddendum(element._owner)) : invariant(false) : undefined;

    // Special case string values
    if (typeof element.type === 'string') {
      instance = ReactNativeComponent.createInternalComponent(element);
    } else if (isInternalComponentType(element.type)) {
      // This is temporarily available for custom components that are not string
      // representations. I.e. ART. Once those are updated to use the string
      // representation, we can drop this code path.
      instance = new element.type(element);
    } else {
      instance = new ReactCompositeComponentWrapper();
    }
  } else if (typeof node === 'string' || typeof node === 'number') {
    instance = ReactNativeComponent.createInstanceForText(node);
  } else {
    !false ? process.env.NODE_ENV !== 'production' ? invariant(false, 'Encountered invalid React node of type %s', typeof node) : invariant(false) : undefined;
  }

  if (process.env.NODE_ENV !== 'production') {
    process.env.NODE_ENV !== 'production' ? warning(typeof instance.construct === 'function' && typeof instance.mountComponent === 'function' && typeof instance.receiveComponent === 'function' && typeof instance.unmountComponent === 'function', 'Only React Components can be mounted.') : undefined;
  }

  // Sets up the instance. This can probably just move into the constructor now.
  instance.construct(node);

推荐答案

检查文件中的 import/require 语句,以及要导入/需要的组件的导出.当我遇到这样的错误时,通常是因为我错误地导入了它(ES6),即

Check your import / require statements in your file, as well as the export for the components you're importing/requiring. When I get errors like this, it's usually because I'm either importing it incorrectly (ES6), i.e.

import MyComponent from './my-component'

代替

import { MyComponent } from './my-component'

或者我可能错误地导出了它(忘记导出默认值,或者可能在我无意中导出为默认值),或者我忘记完全导出组件.

or maybe I've exported it incorrectly (forgetting to export default, or maybe exporting as default when I didn't mean to), or I forgot to export the component entirely.

这篇关于未捕获的错误:不变违规:元素类型无效:应为字符串的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆