警告：React.createElement：类型无效——应为字符串（对于内置组件）或 class/function

Question

我正在做一个练习来进一步了解本机反应，我正在使用 FlagtList 来显示列表，但我抛出了以下错误：

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s%s, 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.

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.

Check the render method of `App`.

Stack trace:
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:5716:10 in createFiberFromTypeAndProps
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:5744:4 in createFiberFromElement
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:9001:8 in reconcileSingleElement
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:9085:14 in reconcileChildFibers
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:11007:6 in reconcileChildren
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:11755:4 in updateHostComponent
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17276:21 in performUnitOfWork
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17316:41 in workLoop
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17417:15 in renderRoot
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18423:17 in performWorkOnRoot
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18324:24 in performWork
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18285:14 in performSyncWork
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18169:19 in requestWork
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17969:16 in scheduleWork
  node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:6934:17 in enqueueSetState
  node_modules/react/cjs/react.development.js:335:31 in setState
  App.js:55:18 in _callee$
  node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
  node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:271:30 in invoke

我实现的代码如下：

import React, { Component } from 'react';
import { StyleSheet, Text, View, FlagtList } from 'react-native';

const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});


export default class App extends Component {

  state = {
    loading: true,
    users: [] // Esto es un arreglo vacio el cual guardara los datos que se trae
  };

  constructor(props) {   
    super(props)
    this.fetchUsers()    
  }

  fetchUsers = async () => {

    const respuesta = await fetch('https://jsonplaceholder.typicode.com/users');

    const pre = await respuesta.json();

    const usersjson = pre.map( x => ({ ...x, key: String(x.id) }));

    this.setState({ users: [usersjson.name], loading: false });

  }

  render() {

    const { loading, users } = this.state;

    if ( loading ) {
      return (
        <View style={ styles.container }>
          <Text>Por Favor espere... </Text>
        </View>
      );
    }

    return <View>
      <FlagtList
        data={ users }
        renderItem={({ item }) => <Text>{item.name}</Text>}
      />
    </View>;
  }

}

不知道为什么报错，尝试执行项目，还是报同样的错误。

我运行它是用纱线开始的。

Answer 1

您输入错误，请尝试将 FlagtList 更改为 FlatList。

import React, { Component } from 'react';
import { StyleSheet, Text, View, FlatList } from 'react-native';

const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});


export default class App extends Component {

  state = {
    loading: true,
    users: [] // Esto es un arreglo vacio el cual guardara los datos que se trae
  };

  constructor(props) {   
    super(props)
    this.fetchUsers()    
  }

  fetchUsers = async () => {

    const respuesta = await fetch('https://jsonplaceholder.typicode.com/users');

    const pre = await respuesta.json();

    const usersjson = pre.map( x => ({ ...x, key: String(x.id) }));

    this.setState({ users: [usersjson.name], loading: false });

  }

  render() {

    const { loading, users } = this.state;

    if ( loading ) {
      return (
        <View style={ styles.container }>
          <Text>Por Favor espere... </Text>
        </View>
      );
    }

    return <View>
      <FlatList
        data={ users }
        renderItem={({ item }) => <Text>{item.name}</Text>}
      />
    </View>;
  }

}

警告：React.createElement：类型无效——应为字符串（对于内置组件）或 class/function

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function

reactjs

react-native

react-native-android