我将用户数据保存到登录组件中的 localStorage，然后重定向到主页。首次访问时主页用户名未更新。我必须重新加载页面。然后数据在刷新后绑定(bind)到页面。请帮助我如何在第一次访问时显示数据？

下面是我的主页代码

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

export default class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLogin: false,
      isLogout: false,
      user: ""
    };
  }

  componentDidMount() {
    const userData = localStorage.getItem("userData");
    const user = JSON.parse(userData);
    this.setState({ user: user });
    if (userData) {
      this.setState({ isLogin: true });
    }
    console.log(userData);
    console.log(user);
  }

  logout = e => {
    e.preventDefault();
    localStorage.clear();
    this.setState({ isLogout: true });
  };

  render() {
    if (this.state.isLogin === false || this.state.isLogout === true) {
      return (
        <header
          id="kr-header"
          className="kr-header cd-auto-hide-header kr-haslayout"
        >
          <div className="container">
            <div className="row">
              <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <strong className="kr-logo">
                  <Link to="/">
                    <img src="images/logo.png" alt="company logo here" />
                  </Link>
                </strong>
                <nav className="kr-addnav">
                  <ul>
                    <li>
                      <Link
                        id="kr-btnsignin"
                        className="kr-btn kr-btnblue"
                        to="login_register"
                      >
                        <i className="icon-smiling-face" />
                        <span>Join Now</span>
                      </Link>
                    </li>
                    <li>
                      <a
                        className="kr-btn kr-btngreen"
                        href="dashboardaddlisting.html"
                      >
                        <i className="icon-plus" />
                        <span>Add Listing</span>
                      </a>
                    </li>
                  </ul>
                </nav>
                <nav id="kr-nav" className="kr-nav">
                  <div className="navbar-header">
                    <button
                      type="button"
                      className="navbar-toggle collapsed"
                      data-toggle="collapse"
                      data-target="#kr-navigation"
                      aria-expanded="false"
                    >
                      <span className="sr-only">Toggle navigation</span>
                      <span className="icon-bar" />
                      <span className="icon-bar" />
                      <span className="icon-bar" />
                    </button>
                  </div>
                  <div
                    id="kr-navigation"
                    className="collapse navbar-collapse kr-navigation"
                  >
                    <ul>
                      <li>
                        <a href="dashboard.html">Dasboard</a>
                      </li>
                    </ul>
                  </div>
                </nav>
              </div>
            </div>
          </div>
        </header>
      );
    } else {
      return (
        <header
          id="kr-header"
          className="kr-header cd-auto-hide-header kr-haslayout"
        >
          <div className="container">
            <div className="row">
              <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <strong className="kr-logo">
                  <Link to="/">
                    <img src="images/logo.png" alt="company logo here" />
                  </Link>
                </strong>
                <nav className="kr-addnav">
                  <ul>
                    <li>
                      <Link
                        id="kr-btnsignin"
                        className="kr-btn kr-btnblue"
                        to="login_register"
                      >
                        <i className="icon-smiling-face" />
                        <span>{this.state.user.user.firstname}</span>
                      </Link>
                    </li>
                    <li>
                      <a
                        className="kr-btn kr-btngreen"
                        href="dashboardaddlisting.html"
                      >
                        <i className="icon-plus" />
                        <span>Add Listing</span>
                      </a>
                    </li>
                    <li>
                      <a onClick={this.logout} className="kr-btn kr-btngreen">
                        <i className="icon-plus" />
                        <span>Logout</span>
                      </a>
                    </li>
                  </ul>
                </nav>
                <nav id="kr-nav" className="kr-nav">
                  <div className="navbar-header">
                    <button
                      type="button"
                      className="navbar-toggle collapsed"
                      data-toggle="collapse"
                      data-target="#kr-navigation"
                      aria-expanded="false"
                    >
                      <span className="sr-only">Toggle navigation</span>
                      <span className="icon-bar" />
                      <span className="icon-bar" />
                      <span className="icon-bar" />
                    </button>
                  </div>
                  <div
                    id="kr-navigation"
                    className="collapse navbar-collapse kr-navigation"
                  >
                    <ul>
                      <li>
                        <a href="dashboard.html">Dasboard</a>
                      </li>
                    </ul>
                  </div>
                </nav>
              </div>
            </div>
          </div>
        </header>
      );
    }
  }
}

登录-注册组件代码如下

import React, {Component} from 'react';
import { Link,Redirect ,withRouter } from 'react-router-dom';
import PropTypes from "prop-types";
import Otp from './otp';
import axios from '../api';

export default class LoginRegister extends Component {
    static contextTypes = {
        router: PropTypes.object
      }
    constructor(props,context){
        super(props,context);
        this.state = {
            fname:'',
            lname:'',
            emailaddress:'',
            password:'',
            mobile:'',
            user:'',
            login_pass:'',
            isLogin:false
        }
        this.regi_data = this.regi_data.bind(this);
        this.login_data = this.login_data.bind(this);
        // this.otpModalRef = React.createRef();
    }

    regi_data(e){
        this.setState({[e.target.name] : e.target.value}
        );
    }
    login_data(e){
        this.setState({[e.target.name] : e.target.value})
    }

    // otpModalRef = ({onOpenModal}) => {
    //    this.showModal = onOpenModal;
    // }

    componentDidMount(){
        if (localStorage.getItem('userData')) {
            this.context.router.history.push({
                        pathname:'/',

                    });
        }
    }




    login = (e) => {
        e.preventDefault();
         axios.post('/api/signin', { 
                        user:this.state.user,
                        password:this.state.login_pass,
                    })
          .then(res => {
                //console.log(res);
                localStorage.setItem('userData', JSON.stringify(res.data));
                this.context.router.history.push({
                        pathname:'/',

                    });
//                  window.location.reload();
                    this.setState({isLogin: true});
          })
          .catch(function (error) {
            console.log(error.message);
          })
    }

    register = (e) => {
        e.preventDefault(); 
        axios.post('/api/user/add', { 
                        firstname: this.state.fname,
                        lastname:this.state.lname,
                        email:this.state.emailaddress,
                        password:this.state.password,
                        mobile:this.state.mobile 
                    },              
                )
          .then(res => {
                console.log(res);
                // this.showModal();
                 this.context.router.history.push({
                        pathname:'/otp_validate',
                    });            
          }).catch(function(error){
            alert(error.message)
          })
    }

最佳答案

问题

从上面显示的代码和您面临的问题来看，您似乎有一个从 Login 的父组件呈现的通用组件 Header 和HomePage，可能来自中央 App 组件，您必须在其中声明 Login 和 Homepage 的路由。如果是这种情况，您面临的问题是，当 App 第一次加载时，Header 也会在此时加载，并且它的 componentDidMount 方法被调用。但是由于此时您没有登录，header 组件没有获取显示用户名所需的用户数据。稍后，每当您执行实际登录操作、将数据存储在本地存储中并重定向到主页时， header 不会被卸载和重新装载，因为它超出了这些单独的 Login 和 Homepage 的范围 组件，因此它的 componentDidMount 事件将不会被触发，并且不会在 header 组件中检测到任何更改。

修复

方法 1:要么创建两个不同的 Header 组件，一个用于登录状态，一个用于注销状态，并将它们放在 Login 和 的渲染方法中>HomePage 组件。在这种情况下，上述在Header组件的componentDidMount中编写的localstorage逻辑应该可以正常工作。

方法 2:将用户数据提升到 Header 组件的父级，并将用户数据作为 prop 传递给该组件。在这种情况下，您可以直接在 Header 的 呈现方法中使用该属性。

关于javascript - 在reactjs中登录主页后数据不刷新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55256212/