Question

我试图注销用户以及显示注册/登录div或个人资料部分，具体取决于用户是否登录，我试图在我的主应用程序上获得渲染的组件上执行此操作。< / p>

使用ReduxDevTools我可以看到当我登录用户时auth状态发生了变化，但是当我尝试渲染LeftContainer设置时auth：state.auth我得到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);

我试图获得auth的状态，但我得到未定义或对象

这是来自reduxdevtools的图片 https://gyazo.com/b189a75e1123cb198412adf93bdd3497

编辑3：当我这样做时

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

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

也许这可以帮助人们帮助找到问题的解决方案

编辑4：我找到了一个解决方案，但我不确定这是否是正确的解决方法，有人可能会解释为什么state.auth没有给出我的愿望结果，这是我的reducer中的东西还是别的什么？这是我的解决方案

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

或更简单的方法（比我在评论中列出的方法）：

我直接从isAuthenticated函数处理mapeStateToProps并将其设为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);

声称状态道具的组件是未定义的，尽管它是，Auth

1 个答案: