时间戳

首页 > 解决方案 > 带有 react-native 元素的嵌套数据

reactjs - 带有 react-native 元素的嵌套数据

问题描述

我正在尝试将嵌套数据从容器组件显示到反应原生的视图组件，但是每当页面加载时，都会将错误消息抛出到屏幕上

容器

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import WardsScreens from './WardsScreen';

class WardsContainer extends Component{

  state= {
    wardsData:[
      {
        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'
      },

    ]
  } 
  render() {
    return (
     <WardsScreens
      displayView = {this.state.wardsData}
     />
    );
  }
}

export default WardsContainer;

查看组件

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import { List, ListItem } from 'react-native-elements'


const WardsScreens =({displayView})=>(
      <List containerStyle={{marginBottom: 20}}>
      {
        displayView.map((item) => (
          <ListItem
            roundAvatar
            avatar={{uri:item.avatar_url}}
            key={item.name}
            title={item.name}
          />
        ))
      }
    </List>
    )

export default WardsScreens;

但是当页面被渲染时，我得到了这个错误

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.

关于如何完成这项工作的任何帮助

标签： reactjsreact-native

解决方案

此错误是如果组件未从您要从中导入的文件中导出。错误可能是您从错误的文件导入（假设文件名与您的组件名称相同）

import WardsScreens from './WardsScreen';

应该

import WardsScreens from './WardsScreens';

推荐阅读