Reactjs 更新存储时，我的一个控制器未渲染

我试图学习react，但在设置已验证的道具时，我无法让标题组件重新渲染。我读了很多关于它的书，但是有太多不同的编码风格，我似乎不能有效地实现它们中的任何一种。当this.props.authenticated更改时，我正在尝试使其重新渲染。这是我的最新尝试，我无法让它在代码的较小部分上工作，所以我想我应该完成整个代码块

import React, { Component, PropTypes } from 'react';
import logo from '../logo.svg';
import { Link } from 'react-router-dom';
import {connect} from 'react-redux';
import * as Actions from '../actions/auth';

class Header extends Component {

constructor() {
    super();
    this.state = { authenticated: false };
  }

    handleSignout() {
    this.props.signOutUser();
    }   

    logOut(event) {
    event.preventDefault();
    this.props.actions.logOutUser();
  }

  render() {
        if (this.props.authenticated){
            return (
                <div>
                    <div className="App">
                        <div className="App-header">
                        <img src={logo} className="App-logo" alt="logo" />
                        <h2>Student Assist App</h2>
                        </div>
                    </div>
                    <div className="navMenu">
                        <ul>
                            <li><Link to="/">Home</Link></li>
                            <li><Link to="/PhoneNumbers">PhoneNumbers</Link></li>
                            <li><Link to="/Addresses" > Addresses</Link></li>
                            <li><Link to="/Credits" > Credits</Link></li>

                        </ul>
                    </div>
                    <div className="authMenu">
                        <ul className="list-inline">
                            {/*<li><img src={profile.picture} height="40px" /></li>
                            <li><span>Welcome, {profile.nickname}</span></li>*/}
                            <Link to="/Home" > logout</Link>
                        </ul>

                    </div>
                </div>
            );
    }else{
            return (
                <div>
                    <div className="App">
                        <div className="App-header">
                        <img src={logo} className="App-logo" alt="logo" />
                        <h2>Student Assist App</h2>
                        </div>
                    </div>
                    <div className="navMenu">
                        <ul>
                            <li><Link to="/">Home</Link></li>
                            <li><Link to="/PhoneNumbers">PhoneNumbers</Link></li>
                            <li><Link to="/Addresses" > Addresses</Link></li>
                            <li><Link to="/Credits" > Credits</Link></li>

                        </ul>
                    </div>
                    <div className="authMenu">
                        <ul className="list-inline">
                            <li><Link to="/SignUp" > Sign Up</Link></li>
                            <li><Link to="/Login" > Login</Link></li>
                        </ul>
                    </div>
                </div>
            );
    }

  }
}

Header.propTypes = {  
  actions: PropTypes.object.isRequired
}

function mapStateToProps(state, ownProps) {  
  return {
    authenticated: state.authenticated
    }
}

export default connect(mapStateToProps, Actions)(Header);

组合减速器为根减速器

import * as ActionTypes from '../actions/auth'
import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';
import { reducer } from 'redux-form';
import phoneNumbers from './phoneNumbers';
import addresses from './addresses';
import auth from './auth';

const rootReducer = combineReducers({
    auth,
    addresses,
    phoneNumbers,
    routerReducer,
    reducer
});

export default rootReducer; 

配置存储看起来像

import { isLoggedIn } from '../actions/auth';
import {createStore, compose, applyMiddleware} from 'redux';  
import { routerMiddleware } from 'react-router-redux';
import  rootReducer  from '../reducers/rootReducer';  
import thunk from 'redux-thunk';
import createHistory from 'history/createBrowserHistory';
import ReduxPromise from 'redux-promise'


export const history = createHistory();

export function configureStore(initialState) {  
  const store = createStore(
        rootReducer,
        initialState,
        compose (
            applyMiddleware(thunk, ReduxPromise, routerMiddleware(history)),
            window.devToolsExtension ? window.devToolsExtension() : f => f
        )
  );

  if (module.hot) {
        // Enable Webpack hot module replacement for reducers
        module.hot.accept('../reducers/rootReducer', () => {
            const nextRootReducer = require('../reducers/rootReducer').default;
            store.replaceReducer(nextRootReducer);
        });
    }

    store.dispatch(isLoggedIn());
  return store;
}

initialState.js如下所示

import { isLoggedIn } from '../actions/auth';
import {createStore, compose, applyMiddleware} from 'redux';  
import { routerMiddleware } from 'react-router-redux';
import  rootReducer  from '../reducers/rootReducer';  
import thunk from 'redux-thunk';
import createHistory from 'history/createBrowserHistory';
import ReduxPromise from 'redux-promise'


export const history = createHistory();

export function configureStore(initialState) {  
  const store = createStore(
        rootReducer,
        initialState,
        compose (
            applyMiddleware(thunk, ReduxPromise, routerMiddleware(history)),
            window.devToolsExtension ? window.devToolsExtension() : f => f
        )
  );

  if (module.hot) {
        // Enable Webpack hot module replacement for reducers
        module.hot.accept('../reducers/rootReducer', () => {
            const nextRootReducer = require('../reducers/rootReducer').default;
            store.replaceReducer(nextRootReducer);
        });
    }

    store.dispatch(isLoggedIn());
  return store;
}

对所有的代码感到抱歉，但我觉得我一直在跟踪这些文件中的代码，我不知道为什么它不起作用，因为我可以从api获取数据，无论是在需要身份验证时还是在不需要身份验证时。 我想我犯了一个愚蠢的初学者错误，但如果有人能让我知道那个错误是什么，那就太好了

这就是我创建应用程序和其他模块的过程

run create-react-app
run insatll react-router-dom --save
run intstall auth0-lock --save
run install redux --save
run install redux-thunk --save
npm install redux-logger --save
npm install react-redux --save
npm install react-router-redux@next --save  //this needs to be v5 to be compatible with react-router-dom v4
npm install jwt-decode --save
npm install redux-promise --save
npm install history --save
npm install --save redux-form

谢谢你的帮助。

我终于让它工作了。 这就是问题所在，在我使用的标题容器中

function mapStateToProps(state, ownProps) {  
  return {
    authenticated: state.authenticated
    }
}

这个功能应该是

function mapStateToProps(state, ownProps) {  
  return {
    authenticated: state.auth.authenticated
    }
}

我很想知道.auth是从哪里来的。auth。。。 目前，我假设它来自包含此行的auth reducer auth.js

export default function auth(state = initialState, action)

电话号码的另一个减速机是

export default function phoneNumbers(state = initialState.phoneNumbers, action)

我可以从state.phoneNumbers访问phoneNumber。 如果有人能证实我的怀疑，或者给我指出正确的方向，那就太好了？ 谢谢

我终于让它工作了。 这就是问题所在，在我使用的标题容器中

function mapStateToProps(state, ownProps) {  
  return {
    authenticated: state.authenticated
    }
}

这个功能应该是

function mapStateToProps(state, ownProps) {  
  return {
    authenticated: state.auth.authenticated
    }
}

我很想知道.auth是从哪里来的。auth。。。 目前，我假设它来自包含此行的auth reducer auth.js

export default function auth(state = initialState, action)

电话号码的另一个减速机是

export default function phoneNumbers(state = initialState.phoneNumbers, action)

我可以从state.phoneNumbers访问phoneNumber。 如果有人能证实我的怀疑，或者给我指出正确的方向，那就太好了？

---

谢谢

有什么问题吗？道具不变？道具已更改，但组件不重新渲染？组件根本没有呈现？嘿，Andrew，问题是在我完成登录后，（this.props.authenticated）属性被更改，但标题没有重新呈现。完成登录后，标题应显示“注销”链接，但始终显示登录链接。问题是什么？道具不变？道具已更改，但组件不重新渲染？组件根本没有呈现？嘿，Andrew，问题是在我完成登录后，（this.props.authenticated）属性被更改，但标题没有重新呈现。完成登录后，标题应显示“注销”链接，但始终显示登录链接。

export default function phoneNumbers(state = initialState.phoneNumbers, action)