Question

我试图在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.

有关如何完成此操作的任何帮助

Answer 1

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

import WardsScreens from './WardsScreen';

应该是

import WardsScreens from './WardsScreens';

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

1 个答案: