コンポーネントが状態propを宣言していない場合は、Auth

Question

ユーザーがログインしているかどうかに応じて、ユーザーをログアウトして、登録/ログインdivまたはプロファイルセクションを表示しようとしています。私のメインアプリでレンダリングされるコンポーネントです。私が認証を取得しstate.authは未定義で、

エラー：

を、私は、ユーザーにかログインしたとき、私は認証状態の変更ことがわかりますが、私はLeftContainer設定認証をレンダリングしようとすると、ReduxDevToolsを使用して

プロパティを読み取ることができません「にisAuthenticated」 未定義の警告の：失敗小道具タイプ：小道具authがLeftContainerに必要に応じてマークされますが、その値はundefinedです。

---

LeftContainerProfile/index.js

import React from 'react'; 
import { FormattedMessage } from 'react-intl'; 
import { Link } from 'react-router' 
import { connect } from 'react-redux'; 
import { logout } from '../../containers/SignIn/authActions'; 
import styled from 'styled-components'; 

import Logo from '../Logo/Logo'; 
import SocialLinks from '../SocialLinks/social_links'; 
import ProfileContainer from './profile'; 
import LinksContainer from './about_links'; 


const Wrapper = styled.div` 
    position: absolute; 
    top: 250px; 
    width: 20%; 
    padding-left: 4%; 
    padding-right: 4%; 
    // height: 100vh; 

`; 

const Button = styled(Link)` 
    width: 100px; 
    height: 50px; 
    background-color: red; 
    color: white; 
    margin: 5px; 
`; 

class LeftContainer extends React.Component { // eslint-disable-line react/prefer-stateless-function 
    logout(e) { 
    e.preventDefault(); 
    this.props.logout(); 
    } 


    render() { 

    const { isAuthenticated } = this.props.auth; 

    const userLinks = (
     <div> 
     <ProfileContainer /> 
     <Button onClick={this.logout.bind(this)}> LOGOUT </Button> 
     </div> 
    ); 

    const guestLinks = (
     <div> 
      <Button to='/login'>LOGIN</Button> 
      <Button to='/sign-up'>REGISTER</Button> 
     </div> 
    ); 

    return (

      <Wrapper> 

      { isAuthenticated ? userLinks : guestLinks } 

      <LinksContainer /> 
      <SocialLinks /> 
      </Wrapper> 
    ); 
    } 
} 

LeftContainer.propTypes = { 
    auth: React.PropTypes.object.isRequired, 
    logout: React.PropTypes.func.isRequired 
} 

function mapStateToProps(state) { 
    return { 
    auth: state.auth 
    }; 
} 

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

---

イム認証の状態を取得しようとしているが、私はここに

未定義またはオブジェクトのいずれかを取得reduxdevtools
https://gyazo.com/b189a75e1123cb198412adf93bdd3497から絵です

---

編集3：私はこれを行うと

function mapStateToProps(state) { 
    console.log(state); 
    return { 
    isAuthenticated: state.auth 
    }; 
} 

が、私は多分これが私の問題を解決

---

編集4を見つける手助けに人々を助けるこの https://gyazo.com/432247229816e4a68a50133834b551c9

を得る：I解決策を見つけましたが、これが正しい方法であるかどうかわかりませんが、国家がなぜ私の欲望の結果を与えていないのかを説明できる人がいますか？ cerか何か他の？ここに私の解決策は、

class LeftContainer extends React.Component { // eslint-disable-line react/prefer-stateless-function 

    logout(e) { 
    e.preventDefault(); 
    this.props.logout(); 
    } 



    render() { 

    const { isAuthenticated } = this.props; 

    const userLinks = (
     <div> 
     <ProfileContainer /> 
     <Button onClick={this.logout.bind(this)}> LOGOUT </Button> 
     </div> 
    ); 

    const guestLinks = (
     <div> 
      <Button to='/login'>LOGIN</Button> 
      <Button to='/sign-up'>REGISTER</Button> 
     </div> 
    ); 

    return (

      <Wrapper> 
      { isAuthenticated ? userLinks : guestLinks } 
       <div> 
      {/*<Button to='/login'>LOGIN</Button> 
      <Button to='/sign-up'>REGISTER</Button>*/} 
     </div> 
      <LinksContainer /> 
      <SocialLinks /> 
      </Wrapper> 
    ); 
    } 
} 

// LeftContainer.propTypes = { 
// auth: React.PropTypes.object.isRequired, 
// logout: React.PropTypes.func.isRequired 
// } 

    // LeftContainer.propTypes = { 
    // isAuthenticated: React.PropTypes.bool.isRequired, 
    // logout: React.PropTypes.func.isRequired 
    // } 
    // LeftContainer.defaultProps = { 
    //  isAuthenticated: true, 
    // } 

    function mapStateToProps(state) { 
     console.log(state._root.entries[3][1].isAuthenticated); 
     return { 
     isAuthenticated: state._root.entries[3][1].isAuthenticated 
     }; 
    } 

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

Answer 1

か（私はコメントに記載されてきたものよりも）はるかに簡単なアプローチです：

私はmapeStateToProps関数から直接isAuthenticatedを治療し、それ以上のためのbool価値作ら読書力。これは、あなたが小道具に入れ子オブジェクトを渡さないので、エラーが起こりにくいです。また、代替として、私はdefaultProp値を追加しました。

これはトリックです。

class LeftContainer extends React.Component { // eslint-disable-line react/prefer-stateless-function 
     logout(e) { 
     e.preventDefault(); 
     this.props.logout(); 
     } 


     render() { 

     const { isAuthenticated } = this.props; 

     const userLinks = (
      <div> 
      <ProfileContainer /> 
      <Button onClick={this.logout.bind(this)}> LOGOUT </Button> 
      </div> 
     ); 

     const guestLinks = (
      <div> 
       <Button to='/login'>LOGIN</Button> 
       <Button to='/sign-up'>REGISTER</Button> 
      </div> 
     ); 

     return (

       <Wrapper> 

       { isAuthenticated ? userLinks : guestLinks } 

       <LinksContainer /> 
       <SocialLinks /> 
       </Wrapper> 
     ); 
     } 
    } 

    LeftContainer.propTypes = { 
     isAuthenticated: React.PropTypes.bool.isRequired, 
     logout: React.PropTypes.func.isRequired 
    } 
    LeftContainer.defaultProps = { 
     isAuthenticated: false, 
    } 

    function mapStateToProps(state) { 
     return { 
     isAuthenticated: state.auth && state.auth.isAuthenticated 
     }; 
    } 

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