Question

我正在尝试创建我的反应应用。在基本的我通过passport.js和express登录进行A Auth页面。我尝试了一切来显示用户mailadres，但似乎没有任何作用。 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);

我的操作文件

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")));
  }
}

最后一项是我的reducer文件

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;
}

很抱歉代码，但我认为你需要看到所有人来帮助我。

Answer 1

this.props.username.emal'电子邮件'中的

拼写错误。

此外，根据文档，this.props.getprofile()应该在componentDidMount()中，而不在构造函数中

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

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

1 个答案: