Как я могу создать повторно используемый компонент профиля в Reaction-native?

Question

В настоящее время я пытаюсь создать компонент, в котором перечислены все профили (этот фактически выполнен), а другой - список деталей выбранного профиля.

В настоящее время я отображаю списокиз профилей, затем с помощью реагирующего навигатора, пользователь перемещается со страницы профилей в представление подробностей профиля, а в функции "componentDidMount" я получаю детали профиля, мой код фактически работает до этого момента, но если я идувернуться на страницу профилей и попытаться просмотреть другие сведения о профиле, я получил следующую ошибку:

"TypeError: TypeError: Constructor не является функцией. (вычисление 'instance instanceof Constructor')" "

profiles.js

import React from 'react';
import { StyleSheet, Text, View,  TouchableOpacity, FlatList} from 'react-native';
import http from '../../../interceptor/http.interceptor';
import Icon from 'react-native-vector-icons/Ionicons';
import { Platform } from 'react-native';

export default class profiles extends React.Component {
constructor(props){
    super(props);
}
state = { 
    profiles: []
};

componentDidMount() {
    try {
        http.get('/api/profiles')
        .then(response => {
            let responseData = response.data
            this.setState({profiles: responseData})
        })
    } catch(err) {
        console.error(err)
    }
}

goToProfilePage(id) {
    this.props.navigation.navigate('profile', {profileID: id})
}

renderItem = ({ item }) => (
    <View style={styles.item}>
        <Icon size={60} name={ Platform.OS === 'ios' ?  'ios-person' : 'md-person' } style={{ color: 'grey' }} />
        <Text>{item.userName}</Text>
        <TouchableOpacity style={styles.button} onPress={ () => {this.goToProfilePage(item._id)}}>
            <Text style={{color: 'white'}}>View Profile</Text>
        </TouchableOpacity>
    </View>
);

render() {
    const { profiles } = this.state;
    return (
    <FlatList 
        data={profiles}
        numColumns={2}
        renderItem={this.renderItem}
        keyExtractor={(item) => item._id} 
        />
    )}
}

profile.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import http from '../../../interceptor/http.interceptor';

export default class profile extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      profileData: []
    }
  }

  componentDidMount() {
    const { params } = this.props.navigation.state
    http.get(`/api/profiles/${params.profileID}`)
     .then(res => {
      profile = res.data;
      this.setState({
        profileData: profile 
      })
    })
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>
            Profile page
        </Text>
      </View>
    );
  }
}

Я не знаю, в чем проблема с моим кодом, я думаю, что не могу повторно использовать компоненткак это, но я хотел бы получить результат, где я могу использовать один компонент в качестве компонента подробного просмотра профиля.