Ошибка React native elements: инвариантное нарушение: недопустимый тип элемента

#reactjs #react-native #react-props

Вопрос:

Я пытаюсь использовать FormValidationMessage из react-native-elements. Я не вижу, что я делаю не так. Я получаю сообщение об ошибке:

 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>

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

1. this.props.error Как выглядит ошибка? это объект, строка или какой-либо другой тип данных?

2. @remelkabir это строка. Я использую react-redux, и он установлен в моем редукторе. Я могу запротоколировать это просто отлично прямо перед моим возвращением.

3. Похоже, что они удалили компонент из своей кодовой базы, но не обновили свои документы. @jacobmarsellos github.com/react-native-training/react-native-elements/blob /…

4. Ну, это общественный проект. Вы всегда можете сделать запрос на извлечение, чтобы обновить документы самостоятельно, если у вас есть время. 🙂 Я бы рекомендовал использовать это как документы вместо readme. react-native-training.github.io/react-native-elements

5. Спасибо, если вы опубликуете вышеуказанное в качестве ответа, я приму его

Ответ №1:

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

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

1. Спасибо за ответ. Действительно, похоже, что это так! У вас есть какие-нибудь идеи, как решить эту проблему сейчас?

2. Я бы поискал аналогичный компонент в react-native-elements или написал пользовательский в соответствии с необходимостью.

3. Спасибо @remelkabir — на самом деле после прочтения документов я обнаружил, что в самом react-native-elements они перенесли эту функциональность в компонент <Input>, который может получать ‘error’ в качестве реквизита.

4. обновленная ссылка 👉 react-native-elements.github.io/react-native-elements/blog/2019 /…

Ответ №2:

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

 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;
  }
}

Ответ №3:

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

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

против

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

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