如何在react-native中创建可重用的配置文件组件？

Question

我目前正在尝试创建一个列出所有配置文件（实际上已完成）的组件，以及另一个列出所选配置文件详细信息的组件。

我当前正在从配置文件中呈现一个列表，然后使用一个反应导航器，用户从配置文件页面导航到配置文件详细信息视图，在“ componentDidMount”功能中，我获取了配置文件详细信息，我的代码实际上是工作到这一点，但是如果我回到个人资料页面，并尝试查看其他个人资料详细信息，则会收到以下错误：

“ TypeError：TypeError：构造函数不是函数。（评估'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>
    );
  }
}

我不知道我的代码有什么问题，我认为我不能重用这样的组件，但是我想获得一个结果，我可以将一个组件用作详细的个人资料视图组件。