简体   繁体   English

不在渲染中渲染this.props-反应redux

[英]Not rendering this.props in render - react redux

I am try to create my react app. 我正在尝试创建我的React应用。 in the basic I make A Auth page with login by passport.js and express. 在基本的代码中,我创建了一个Auth页面,并通过passport.js登录并表示。 I tried everything to display the user mailadres, but nothing seems to work. 我尝试了所有方法来显示用户mailadres,但似乎没有任何效果。 this.props.email this.props.email

Header.jsx 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. this.props.username.emal “电子邮件”的拼写错误。

Also, this.props.getprofile() should be in componentDidMount() , not in the constructor, per the docs 另外, this.props.getprofile()this.props.getprofile()应该位于componentDidMount() ,而不是在构造函数中

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

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