구성 요소 상태가 prop가 아니라도 정의되지 않았습니다. Auth

Question

사용자가 로그인했는지 여부에 따라 사용자를 로그 아웃하고 등록/로그인 div 또는 프로필 섹션을 표시하려고하는 중입니다. 시도하고 있습니다. 내 주 앱에서 렌더링되는 구성 요소.

나는 인증 상태 변화 나 사용자 또는하지 로그인 할 때 볼 수 ReduxDevTools를 사용하지만 인증 설정 LeftContainer을 렌더링 할 때 : 나는 인증이 정의되지 얻을 state.auth을

오류 :

정의되지 않은 'isAuthenticated'속성을 읽을 수 없습니다. 경고 : 실패한 소품 유형 : LeftContainer에 필수품으로 표시된 이지만 그 값은 undefined입니다. reduxdevtools에서

---

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

---

임되는 인증의 상태를 얻으려고 노력하지만 난 정의 중 하나를 얻거나 여기

객체 사진
https://gyazo.com/b189a75e1123cb198412adf93bdd3497

---

편집 3 :이

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

내가이 https://gyazo.com/432247229816e4a68a50133834b551c9

어쩌면이 내 문제에 대한 해결책을 찾을 수 있도록 사람들을 도움이 될 것입니다받을 수 있나요 때

---

편집 4 : I 해결책을 찾았지 만 이것이 올바른 방법인지 확실하지 않은데 누군가가 어째서 state.auth가 내 욕망 결과를주지 않는지 설명 할 수 있습니까? 너 뭐 다른가?

나는 mapeStateToProps 기능에서 직접 isAuthenticated 처리 등을 위해 그것을 bool 값을 만든 : 여기에 (내가 주석에 열거 한 것보다) 내 솔루션

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

또는 훨씬 간단한 방법입니다 읽기 쉽다. 소포에 중첩 된 객체를 전달하지 않으므로 오류가 발생하기 쉽습니다. 또한 fallback으로 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);