Недопустимый тип элемента при использовании Flatlist - PullRequest
Новая
       28

Недопустимый тип элемента при использовании Flatlist

1 голос
/ 11 июля 2020

Обратите внимание на следующий класс. Как только я использую FlatList (или List), я получаю сообщение об ошибке: «Тип элемента недействителен: ожидается строка (для встроенных компонентов) или класс / функция для составных компонентов), но получено: undefined. Вы, вероятно, забыли чтобы экспортировать компонент из файла, в котором он определен, или вы могли перепутать импорт по умолчанию и именованный импорт. Проверьте метод рендеринга 'Userlist' "

Когда я ищу эту ошибку, она обычно связана с отсутствует неправильный импорт. Я думаю, мой импорт правильный? 

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

1 Ответ

1 голос
/ 11 июля 2020

Импорт 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 {

  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}
        leftAvatar={{ 
          source: { 
            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 (

      <FlatList
        data={list}
        renderItem={this.renderRow}
        keyExtractor={item => item.name}
      />
    )
  }
}
...