声明状态属性的组件是未定义的，即使它是，Auth

Question

我正在尝试注销用户并显示注册/登录 div 或配置文件部分，具体取决于用户是否登录，我尝试在我的主应用程序上呈现的组件上执行此操作。

使用 ReduxDevTools 我可以看到当我登录用户时身份验证状态会发生变化，但是当我尝试呈现 LeftContainer 设置身份验证时：state.auth 我得到身份验证未定义，

错误：

无法读取未定义的属性“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 
  };
}

我明白了 https://gyazo.com/432247229816e4a68a50133834b551c9

也许这会帮助人们找到解决我问题的方法

---

编辑 4：我找到了一个解决方案，但我不确定这是否是解决此问题的正确方法，有人可以解释为什么 state.auth 没有给出我想要的结果，是我的减速器中的东西还是其他东西？这是我的解决方案

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 值以提高可读性。这不太容易出错，因为您不会在 props 上传递嵌套对象。作为后备，我添加了一个 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);