元素类型无效，使用 Flatlist 时

Question

请看下面的课程。一旦我使用 FlatList（或 List），我就会收到错误消息：“元素类型无效：期望字符串（对于内置组件）或复合组件的类/函数）但得到：未定义。你可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。检查“用户列表”的渲染方法”

当我搜索此错误时，它通常与缺少错误的导入有关。我想，我的进口是正确的？

import React, { Component } from 'react';

import { ScrollView, View, Text, Navigator, Alert, StyleSheet} from 'react-native';

import { List, FlatList, ListItem } from 'react-native-elements';

import FBUsers from '../../firebase/FBUser'

export default class Userlist extends React.Component {

    fbUser = new FBUsers();

    constructor(props) {

       super(props);

       this.state = {

         lastRefresh: '',

       }

    }

    refresh() {

        this.setState({lastRefresh: Date(Date.now()).toString()});

    }

    // buildUserList() {

    //     var users = this.fbUser.getUserList();

    //     return users;

    // }

    renderRow ({ item }) {

    return (

      <ListItem

        roundAvatar

        title={item.name}

        subtitle={item.subtitle}

        avatar={{uri:item.avatar_url}}

      />

    )

  }

  render () {

    var list = [

      {

        name: 'Amy Farha',

        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',

        subtitle: 'Vice President'

      },

      {

        name: 'Chris Jackson',

        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',

        subtitle: 'Vice Chairman'

      }

    ]

    return (

      <List>

        <FlatList

          data={this.list}

          renderItem={this.renderRow}

          keyExtractor={item => item.name}

        />

      </List>

    )

  }

}

Answer 1

FlatList从导入react-native。这就是您收到此错误的原因。使用此代码。import React, { Component } from 'react';import { ScrollView, View, Text, Navigator, Alert, StyleSheet, FlatList } from 'react-native';import { ListItem } from 'react-native-elements';export default class Userlist extends React.Component {&nbsp; constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; lastRefresh: '',&nbsp; &nbsp; }&nbsp; }&nbsp; refresh() {&nbsp; &nbsp; this.setState({ lastRefresh: Date(Date.now()).toString() });&nbsp; }&nbsp; // buildUserList() {&nbsp; //&nbsp; &nbsp; &nbsp;var users = this.fbUser.getUserList();&nbsp; //&nbsp; &nbsp; &nbsp;return users;&nbsp; // }&nbsp; renderRow({ item }) {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <ListItem&nbsp; &nbsp; &nbsp; &nbsp; roundAvatar&nbsp; &nbsp; &nbsp; &nbsp; title={item.name}&nbsp; &nbsp; &nbsp; &nbsp; subtitle={item.subtitle}&nbsp; &nbsp; &nbsp; &nbsp; leftAvatar={{&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source: {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; uri: item.avatar_url&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; )&nbsp; }&nbsp; render() {&nbsp; &nbsp; var list = [&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; name: 'Amy Farha',&nbsp; &nbsp; &nbsp; &nbsp; avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',&nbsp; &nbsp; &nbsp; &nbsp; subtitle: 'Vice President'&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; name: 'Chris Jackson',&nbsp; &nbsp; &nbsp; &nbsp; avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',&nbsp; &nbsp; &nbsp; &nbsp; subtitle: 'Vice Chairman'&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ]&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <FlatList&nbsp; &nbsp; &nbsp; &nbsp; data={list}&nbsp; &nbsp; &nbsp; &nbsp; renderItem={this.renderRow}&nbsp; &nbsp; &nbsp; &nbsp; keyExtractor={item => item.name}&nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; )&nbsp; }}