React -Redux：为什么即使提取完成也没有准备好数据？

如何解决React -Redux：为什么即使提取完成也没有准备好数据？

目前，我正在学习如何使用fetching-Flags来检索异步数据。提取标志效果很好。但是即使isFetching=false，也意味着profile不可用。 React给了我一个不确定的错误：

Unhandled Rejection (TypeError): Cannot read property 'data' of undefined

标题组件

export class Header extends Component {
    

    render() {
        const { isAuthenticated } = this.props.auth;
        const profile = this.props.profile;
        const isFetching = this.props.isFetching


        console.log (isFetching)
        console.log (profile);
        


 //  Data is fetching
if (isFetching === true) return (<h1>Loading ...</h1>);

//  Data is ready: Here the username within the profile is called.
if (isFetching === false ) return (<h1> Hallo {profile[0].username} </h1>);

}
}



const loadingSelector = createLoadingSelector(['GET_USER','GET_PROFILE']);

function mapStateToProps(state,ownProps) {
    const auth = state.auth
    const profile = state.profile
    const isFetching = loadingSelector(state)

  return { auth,profile,isFetching}
};

export default connect(
    mapStateToProps,{ logout }
)(Header);

个人资料操作

export const getProfile = () => (dispatch,getState) => {
  // Profile Loading
  dispatch({ type: GET_PROFILE_REQUEST });
  dispatch(showLoading());
  axios
    .get(apiBase + "/profile/",tokenConfig(getState))
    .then(res => {
      dispatch({
        type: GET_PROFILE_SUCCESS,payload: res.data
      });
      dispatch(hideLoading())
    })
    .catch((err) => {
      dispatch(returnErrors(err.response.data,err.response.status));
      dispatch({
        type: GET_PROFILE_FAILURE,});
      dispatch(hideLoading())
    });
};

Profile Reducers

const initialState = {
  profile: null
};

export default function(state = initialState,action) {
  switch (action.type) {
case GET_PROFILE_REQUEST:
      return {
        ...state,};
case GET_PROFILE_SUCCESS:
      return {
        ...state,profile: action.payload,};

case GET_PROFILE_FAILURE:
      return {
        ...state,};

    default:
      return state;
  }
}

控制台日志：在获取过程开始之前，配置文件未准备就绪时，获取标志为false。

header.js:16 false // isFetching
header.js:18 {profile: null}
header.js:16 true // isFetching
header.js:18 {profile: null}
header.js:16 true // isFetching
header.js:18 {profile: null}
header.js:16 false // isFetching
header.js:18 {profile: Array(1)}

为什么即使获取标志指示数据应该可用，数据仍未准备好（未定义）？

我很高兴得到澄清。

修改 我简化了代码片段，并添加了Action Creator和Reducer。动作创建者在App.js中被调用。我还认为，该错误是由于在配置文件数据仍为isFetching=false的最初null（请参阅控制台日志）的情况下引起的。因此可能会导致错误。

但是我该如何解释组件中的这种初始状态？

解决方法

最初isFetching = false，它会返回一个空对象，您正尝试渲染该空对象，因为尚未加载配置文件，因此引发错误，如果您可以按如下所示更改渲染部分，则可以达到所需的

  export class Header extends Component {


   render() {
    const { isAuthenticated } = this.props.auth;
    let profile=[]
    if(this.props.profile!==null){
     profile = this.props.profile;
     }
    const isFetching = this.props.isFetching


    console.log (isFetching)
    console.log (profile);
    



 if (isFetching === true) return (<h1>Loading ...</h1>);

 if (isFetching === false ) return 
 (<h1>
  Hallo {profile.length>1? 
 {profile[0].username}:null} </h1>); //initially it renders profile once it is available

 }
 }