Question

我正在使用react / redux并尝试使用反应生命周期方法来实现这一点。我将逐步完成我想要发生的事情以及正在发生的事情。

我将在下面发布我认为需要的所有代码来解决这个问题。如果您需要额外的内容，请在下方发表评论，我会将其添加到编辑中，而不是回复那些评论无法编辑的内容。

我想要的是什么：

用户输入登录数据并点击登录
用户已登录，其电子邮件显示在标题组件
用户点击退出并转到退出组件
当用户被带到退出组件时，他们的电子邮件不再显示

发生了什么：

用户输入登录数据并点击登录
用户已登录且电子邮件未在标题组件中显示，直到完成硬刷新
用户点击退出并转到退出组件
当用户被带到退出组件时，他们的电子邮件会一直显示，直到硬刷新完成

标题组件：

import React, { Component } from 'react';
import {connect} from 'react-redux';
import {Link} from 'react-router-dom';
import * as actions from '../actions/index';

class Header extends Component {
  componentDidMount() {
    if(this.props.authenticated) {
      this.props.getUser();
    }
  }

  renderLinks() {
    if(this.props.authenticated) {
      return [
        <li className="nav-item" key={1}>
          <Link className="nav-link" to="/signout">Sign Out</Link>
        </li>,
        <li className="nav-item" key={2}>
          <Link className="nav-link" to="/posts/new">Create New Post</Link>
        </li>,
        <li className="nav-item" key={3}>
          <Link className="nav-link" to="/posts">Posts</Link>
        </li>
      ];
    } else {
      return [
        <li className="nav-item" key={4}>
          <Link className="nav-link" to="/signin">Sign In</Link>
        </li>,
        <li className="nav-item" key={5}>
          <Link className="nav-link" to="/signup">Sign Up</Link>
        </li>
      ];
    }
  }

  renderUser() {
    if(this.props.user) {
      return (
        <li className="nav-item" key={this.props.user.id}>
          {this.props.user.email}
        </li>
      )
    }
  }

  render() {
    console.log(this.props.user);
    return (
      <nav className="navbar navbar-light">
        <Link to="/" className="navbar-brand">Ghost Hunters</Link>
        <ul className="nav navbar-nav">
          {this.renderLinks()}
        </ul>
        <ul className="nav navbar-nav navbar-right">
          {this.renderUser()}
        </ul>
      </nav>
    )
  }
}

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

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

退出组件：

import React, {Component} from 'react';
import {connect} from 'react-redux';
import * as actions from '../../actions';

class Signout extends Component {
  componentWillMount() {
    this.props.signoutUser();
  }

  render() {
    return (
      <div>Sorry to see you go...</div>
    );
  }
}

function mapStateToProps(state) {
  return {
    user: state.user
  }
}

export default connect(null, actions)(Signout);

Answer 1

父级将仅在组件安装时调用getUser，并且仅执行一次。看起来你需要在成功登录后调用getUser，或者只是将用户属性置于状态，登录后更新状态，让react和redux为你处理UI更新。

REACT / REDUX，登录时显示用户，退出时不显示

1 个答案: