Вопрос по reactjs, jquery, react-native, javascript, redux – Uncaught Ошибка: Инвариантное Нарушение: Неверный тип элемента: ожидается строка

0
я пытаюсь отладить мой код реакции.в моем методе рендеринга я пытаюсь поставить отладчик и отладчик.после того, как я перешагну через метод retun, он переходит в warning.js.после того, как я перешагну предупреждение.js, если условия его перехода к instantiateReactComponent.jsЯ не уверен, почему он собирается в разные файлы. Можете ли вы сказать мне, почему это происходит в разных файлах.не уверен, как отлаживать.было бы здорово, если бы вы, ребята, дали мне какое-то объяснение, чтобы в будущем я мог исправить ошибку сам

предоставление фрагмента кода, в котором каждый раз выполняется пошаговый вызов функции

error invariant.js? f23e: 39 Uncaught Ошибка: инвариантное нарушение: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. Проверьте метод визуализацииsports-container.

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

    debugger;

    if (sportsEvent === true) {
        return (

warning.js

/ ** * Аналогично инварианту, но регистрирует предупреждение только в том случае, если условие не выполняется. * Это может использоваться для регистрации проблем в средах разработки по критическим * путям. Удаление кода ведения журнала для производственных сред сохранит * ту же логику и будет следовать тем же путям кода. * /

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} node * @return {object} Новый экземпляр конструктора элемента. * @ защищен * /

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);
То, что вы ничего не написали, не означает, что ваш код не использует это. В React есть много файлов, поэтому, разумеется, инструменты разработчика перейдут в функции React. Я не отрицал вас, но вы, вероятно, получаете их, потому что ваш вопрос был очень плохо отформатирован. И, наконец, вы можете опубликовать свой полный метод рендеринга или вы намеренно скрываете его от нас? azium
Возвращаемое значение вашего вызова рендера обрезается в вашем вопросе. azium
Потому что функции определены в разных файлах? И поскольку функции могут передаваться как обратные вызовы, вызываемый объект также может находиться в другом файле. Я думаю, что вашу проблему не так уж сложно решить, но если вы не покажете нам весь свойrender Функция, которую мы никогда не узнаем. azium
@azium Привет, но я не писал warning.js, но когда я отлаживаю его, вы знаете, почему ... я понял, что опубликовал только половину метода рендеринга, так как меня больше интересует отладка инструментов разработчика :( user6015171

Ваш Ответ

1   ответ
25

а также экспорт для компонентов, которые вы импортируете / требуете. Когда я получаю такие ошибки, обычно это происходит потому, что я либо импортирую их неправильно (ES6), т.е.

import MyComponent from './my-component'

вместо

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

или, возможно, я экспортировал его неправильно (забыл экспортировать по умолчанию, или, может быть, экспортировал по умолчанию, когда я этого не хотел), или я забыл полностью экспортировать компонент.

Похожие вопросы