反应组件未加载？

Question

我已经在React中的一个单独文件中创建了header.js组件，并且我试图将其引入Profile.js文件中，但未在前端加载。

我没有任何错误。

输出：

Profile.js：

在此文件中，我认为它无法加载标头组件，因为它仅打印if循环中的数据，尽管在else部分中有数据，但它正在跳过那个。

import React, { Component } from 'react';
import {connect} from 'react-redux';
import PropTypes from 'prop-types';
import {Link} from 'react-router-dom';
import aboutinfo from './aboutinfo';
import userinfo from './userinfo';
import header from './header';

import {getProfileByName} from '../../actions/userprofileAction';

class Profile extends Component {
  componentDidMount() {
    if (this.props.match.params.profilename) {
      this.props.getProfileByName(this.props.match.params.profilename);
    }
  }

  render() {
    const { profile, loading } = this.props.profile;
    let profileContent;

    if (profile === null || loading) {
      profileContent = <h3>loadinggg....</h3>;
    } else {
      profileContent = (
        <div>
          <div className="row">
            <div className="col-md-6">
              <Link to="/userprofile" className="btn btn-light mb-3 float-left">
                Back 
              </Link>
            </div>
            <div className="col-md-6" />
          </div>
          <header/>
        </div>
      );
    }

    return (
      <div className="profile">
        <div className="container">
          <div className="row">
            <div className="col-md-12">{profileContent}</div>
          </div>
        </div>
      </div>
    );
  }
}

Profile.propTypes = {
  getProfileByName: PropTypes.func.isRequired,
  profile: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  profile: state.profile
});

export default connect(mapStateToProps, { getProfileByName })(Profile);

header.js：

import React, { Component } from 'react';
import isEmpty from '../../validation/is-empty';

class header extends Component {
  render() {
    const { profile } = this.props;

    return (
      <div className="row">
        <div className="col-md-12">
          <div className="card card-body bg-info text-white mb-3">

            <div className="text-center">
              <h1 className="display-4 text-center">{profile.user.name}</h1>
              <p className="lead text-center">
                {profile.status}{' '}
                {isEmpty(profile.company) ? null : (
                  <span>at {profile.company}</span>
                )}
              </p>
              {isEmpty(profile.location) ? null : <p>{profile.location}</p>}

            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default header;

userprofileaction.js：

import axios from 'axios';
import {GET_USERPROFILE,PROFILE_LOADING,GET_ERRORS,CLEAR_CURRENT_PROFILE,GET_PROFILES} from './types';

//getting current profile
export const getProfile=()=>dispatch=>{
    //dispatching loading state before req
    dispatch(profileLoading());
    axios.get('/api/userprofile')
    .then(res=>
    dispatch({
        type:GET_USERPROFILE,
        payload:res.data
    }))
    .catch(err=>
    dispatch({
        type:GET_USERPROFILE,
        payload:{}
    }))
}


 // Create Profile
export const createProfile = (profileData, history) => dispatch => {
    axios
      .post('/api/userprofile', profileData)
      .then(res => history.push('/dashboard'))
      .catch(err =>
        dispatch({
          type: GET_ERRORS,
          payload: err.response.data
        })
      );
  };
  export const addExp=(experienceData,history)=>dispatch=>{
      axios.post('/api/userprofile/experience',experienceData)
      .then(res=>history.push('/dashboard'))
      .catch(err=>dispatch({
          type:GET_ERRORS,
          payload:err.response.data
      }))
  }

  export const deleteExperience = id => dispatch => {
    axios
      .delete(`/api/userprofile/experience/${id}`)
      .then(res =>
        dispatch({
          type: GET_USERPROFILE,
          payload: res.data
        })
      )
      .catch(err =>
        dispatch({
          type: GET_ERRORS,
          payload: err.response.data
        })
      );
  };
//loading the profile
export const profileLoading=()=>{
    return{
        type:PROFILE_LOADING
    }
}
//clearing profile
export const clearcurrentprofile=()=>{
    return{
        type:CLEAR_CURRENT_PROFILE
    }
}

//getting profiles
export const getProfiles = () => dispatch => {
    dispatch(profileLoading());
    axios
      .get('/api/userprofile/all')
      .then(res =>
        dispatch({
          type: GET_PROFILES,
          payload: res.data
        })
      )
      .catch(err =>
        dispatch({
          type: GET_PROFILES,
          payload: null
        })
      );
  };

  //getting profile by profile name
  export const getProfileByName = profilename => dispatch => {
    dispatch(profileLoading());
    axios
      .get(`/api/profile/handle/${profilename}`)
      .then(res =>
        dispatch({
          type: GET_USERPROFILE,
          payload: res.data
        })
      )
      .catch(err =>
        dispatch({
          type: GET_USERPROFILE,
          payload: null
        })
      );
  };