简体   繁体   中英

Not rendering this.props in render - react redux

I am try to create my react app. in the basic I make A Auth page with login by passport.js and express. I tried everything to display the user mailadres, but nothing seems to work. this.props.email

Header.jsx

import React, {
  Component,
  PropTypes
} from 'react';
import {
  connect
} from 'react-redux';
import * as actions from '../../reducers/auth/actions';
class Header extends Component {
  constructor(props) {
    super(props);
    this.props.getprofile();
  }
  componentDidMount() {


  }
  Logout() {
    this.props.signoutUser();
  }
  render() {
    {
      <div>
      {this.props.username.emal}
    </div>
  );
}
};

function mapStateToProps(state) {
  return {
    username: state.auth.user
  };
}
export default connect(mapStateToProps, actions)(Header);

My action file

import {
  push
} from 'react-router-redux'
import {
  AUTH_USER,
  AUTH_ERROR,
  UNAUTH_USER,
  AUTH_USER_PROFILE
} from './types';
const jwt_decode = require('jwt-decode');

export function getprofile() {
  return dispatch => {
    return fetch('/user', {
        method: 'get',
        headers: {
          "Content-Type": "application/json",
          authorization: localStorage.getItem('token')
        }
      }).then(handleResponse)
      .then(data => {
        dispatch({
          type: AUTH_USER_PROFILE,
          user: data
        });
        return true;
      }).catch(err =>
        dispatch(authError("Foutieve values")));
  }
}

And last item is my reducer file

import {
  AUTH_USER,
  AUTH_ERROR,
  UNAUTH_USER,
  AUTH_USER_PROFILE
} from './types';


export default function auth (state = {
  authenticated: false,
  admin_privileges: false,
  user: []
}, action) {
  switch (action.type) {
    case AUTH_USER_PROFILE:
      return { ...state,
        error: '',
        user: action.user.user,
        authenticated: true
      };

  }

      return state;
}

Sorry for alle the code, but I think you need to see all to help me out.

in this.props.username.emal 'email' is spelled wrong.

Also, this.props.getprofile() should be in componentDidMount() , not in the constructor, per the docs

https://facebook.github.io/react/docs/react-component.html

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM