как проверить, редукс хранилища обновлен, а потом извините логи c в реаги js - PullRequest
Новая
       11

как проверить, редукс хранилища обновлен, а потом извините логи c в реаги js

0 голосов
/ 24 апреля 2020

Привет, у меня есть компонент заголовка в реакции. Этот заголовок присутствует на экране входа в систему на всех других экранах. Я хочу отобразить имя пользователя, вошедшего в систему, в заголовке, как только пользователь успешно вошел в систему. Но чтобы показать, что я проверяю его значение в хранилище и получаю сообщение об ошибке. Как я узнаю, что в магазине есть значения, а затем отобразит их на странице после входа в систему. 

import React from "react";
import { connect } from "react-redux";
import logo from "../Images/Logo.png";

import "bootstrap/dist/css/bootstrap.min.css";

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userDetails: this.props.features,
    };
  }

  componentDidUpdate(prevProps) {
    debugger;
    if (
      JSON.stringify(prevProps.features) !== JSON.stringify(this.props.features)
    ) {
      this.setState({
        userDetails: this.props.features,
      });
    }
    console.log("componentDidUpdate in header", this.state.userDetails[0]);//this line gets prints 2 times. 1st time undefined hence error in render function and 2nd time getting a value
  }

  render() {
    let userRole;
    if (this.state.userDetails !== undefined) {
      userRole = this.state.userDetails[0]["ROLE_CODE"];// here I am getting error in initial page load
      console.log(
        "features in headers",
        this.state.userDetails[0]["PMX_ROLE_CODE"]//here I am getting error in initial page load
      );
    }
    return (
      <div className="container-fluid">
        <div className="container-fluid">
          <div className="d-flex flex-column">
            <div className="p-2 row">
              <div className="col-sm-9">
                <img src={logo}></img>
              </div>
              {this.props.group ? (
                <div className="col-sm-3">
                  Hello <a href=""> </a>
                  <br />
                   {/* want to disply user role here  */}
                  <br></br>
                  <a href=""> View Profile &nbsp;</a>&nbsp;
                  <a href="">Log out </a>
                </div>
              ) : (
                ""
              )}
            </div>
            <div className="d-flex globalStyle">
              <div className="w-100 justify-content-start p-1"></div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  debugger;
  return {
    group: state.login.userDetails.groups,
    features: state.userFeatures.features,
  };
}

export default connect(mapStateToProps)(Header);

1 Ответ

0 голосов
/ 24 апреля 2020

Вы можете передать userName или любое значение в Header, если у вас есть это в вашем App, например: 

// in your App.js render method

<Header userName={'User Name'}/> // this can be in your state/redux after you receive this from the API

Тогда ваш Header будет выглядеть так 

import React from "react";
import logo from "../Images/Logo.png";

import "bootstrap/dist/css/bootstrap.min.css";

const Header = (props) => {

  const {userName} = props;
  return (

    <div
      className="d-flex flex-column"
      style={{ display: "inline-flex !important;" }}
    >
      <div className="p-2 row">
        <div className="col-sm-9">
          <img src={logo}></img>
        </div>
        <div className="col-sm-3">
           Hello <a href=""></a> {userName}
          <br />
          <a href="">Log out </a>
        </div>
        <div className="d-flex globalStyle"></div>
      </div>
    </div>
  );
};

export default Header;
...