[在Redux中获取用户个人资料时发生TypeError

Question

[error log image 我已经遇到了这个问题，该问题目前对我不起作用

我基本上有一个可以注册和登录的身份验证应用，但是当我尝试获取配置文件数据时，我遇到了TypeError（无法读取未定义的属性'FirstName'。

在redux工具中

the isAuthenticated: true
error: null
and profile: {
joined: xxxxxx
_id:4rt43dfdsletc
firstName: "xxxx"
email:"adfadf@fsa.com"
}

等，一切都正常，并且该应用程序还包含redux持久性，也可以正常工作

但是，在导航栏中，我试图显示用户的名字，但出现错误

这是我的LOGIN.ACTION.JS

export const autUser = data => {
  return async dispatch => {
    // dispatch({ type: LOGIN_REQUEST}
    return await apiLogin(data)
      .then(res => {
        const token = res.data.token;
        console.log(token);
        dispatch(success(token));
        setAuthHeader(token);
        dispatch(getUserProfile())
        // console.log('User Details', jwt.decode(token));
      })
//error will be dispatched here
      .catch(err => console.log(err));
  };
};


const success = token => {
  localStorage.setItem(TOKEN_NAME, token);
  return { type: LOGIN_SUCCESS };
};

const error = error => {
  return { type: LOGIN_FAIL, payload: error };
};

在同一文件中获取配置文件

export const getUserProfile = () => {
    return async dispatch => {
        try {
            console.log("fetching profile......")
            const { data : {user} } = await apiFetchProfile();
            dispatch({ type: PROFILE_FETCHED, payload: user })
            console.log(user)
        } catch (e) {
            console.error(e)
        }
    };
};

这是我的index.js

store.dispatch(checkLoggedIn())
if(localStorage.donedeal){
    setAuthHeader(localStorage.donedeal);
    store.dispatch(getUserProfile())
}

ReactDOM.render(
<Provider store ={store}>

<App />
</Provider>
, document.getElementById('root'));

Navbar.js

import React from "react";
import "./navbar.css";
import { connect } from "react-redux";
import { logOut} from "../../actions/login";
// import { Link } from "react-router-dom";

import logo  from './logo.png'
const Navbar = ({ isAuth, logOut, profile}) => {
  return (
    <header>

        <img src={logo} alt="Logo" className="logo" />
         <nav className="nav_links">
             <li><p> Buy and sell <span className="bold"> your things  </span> </p></li>
             <a className="cta" href=""><button> <li className="fas fa-plus"></li> Place ad </button></a>
             {/* <li><a href=""> Sign up</a></li> */}
       {/* <li><a href=""> Login</a></li> */}
       {isAuth ? (
         <div>
           <p>{profile.firstName}</p>

           <button onClick={() => logOut()}> Logout </button>
         </div>

          ) : (<div><button> Login </button><button>Register</button></div>) 
          }
         </nav>




    </header>
  );
};

const mapStateToProps = ({ login }) => {
  return {
    isAuth: login.isAuthenticated,
    profile: login.profile
  };
};
export default connect(
  mapStateToProps,
  { logOut}
)(Navbar);

上面的代码无处不在，因为我只是在试验它，但是它正在注册并登录用户，甚至获取个人资料，但我无法显示信息。

[可能有某种类型或我做错的事情看不到

非常感谢您的帮助。