Реакция собственных элементов ошибки: нарушение инварианта: недопустимый тип элемента

Question

Я пытаюсь использовать FormValidationMessage из реактивных элементов.Я не вижу, что я делаю неправильно.Я получаю сообщение об ошибке:

Invariant Violation: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Я импортирую так же, как документы :

import { Input, Button, FormValidationMessage } from 'react-native-elements';

Моя функция, которая его использует:

showLoginError() {
    console.log(this.props.error); //I can log the correct error here
    if (this.props.error) {
      return(
        <FormValidationMessage>{this.props.error}</FormValidationMessage>
      )
    }
}

Я напрямую вызываю эту функцию при рендеринге, подобном этому

<View style={{width: 250}}>
   {this.showLoginError()}
</View>

Я просмотрел весь интернет, но, похоже, нет ясного решения.

Answer 1

Вам нужно сделать так, чтобы ваша функция возвращала ноль в случае отсутствия ошибки.

showLoginError() {
  console.log(this.props.error); //I can log the correct error here
  if (this.props.error) {
    return(
      <FormValidationMessage>{this.props.error}</FormValidationMessage>
    )
  } else {
    return null;
  }
}

Answer 2

Похоже, что они взяли компонент из своей кодовой базы в своем последнем выпуске.

https://github.com/react-native-training/react-native-elements/blob/c668c78dddd9315f6ca5ec2548e051b2a7e29c73/website/blog/2019-01-27-1.0-release.md#form

Answer 3

В моем случае (с использованием Webpack) разница была:

import {MyComponent} from '../components/xyz.js';

против

import MyComponent from '../components/xyz.js';

Второй работает, в то время как первый вызвал ошибку.