Question

我正在尝试使用react-native-elements中的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.

我像docs一样导入：

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

在没有错误的情况下，您需要使函数返回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;
  }
}

Answer 2

就我而言（使用Webpack）是两者之间的区别：

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

vs

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

第二个起作用，而第一个引起错误。

Answer 3

看起来他们已经在最新版本中将组件从代码库中删除了。

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

反应本机元素错误：不变违反：元素类型无效

3 个答案: