Reactjs-如何在导航栏上显示用户名

Question

我想在导航栏上显示我登录用户的用户名。我已经使用 cookie 和会话来保持用户登录，即使在重新加载时也是如此，这样就可以正常工作了。出于测试目的，我在表单底部显示了用户名，效果也很好。

我有一个带有导航栏的 nav_componenent。我尝试将名称作为道具传递给导航栏，然后显示它并且它有效但问题是它仅显示该登录页面，如果我切换到另一个页面则不会，这意味着我将不得不传递道具到每个组件，然后在所有组件中导入 Nav，这很忙，因此我试图避免这种情况。

我想将值传递给我的 parent 即 app.js 并显示该用户名。我是在函数的帮助下完成的，因为你不能将道具从 child 传递到 parent。但是，这没有用。

到目前为止，这是我的代码： App.js:

import "bootstrap/dist/css/bootstrap.min.css";
import React, { useState } from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import "./App.css";
//import axios from "axios";
import CompanyMaster_Enter from "./components/companymaster_enter";
import Login from "./components/login_component";
import Register from "./components/register_component";
import Home from "./components/home_component";
import CustomerMaster_Enter from "./components/customermaster_enter";
import ParamMaster_Enter from "./components/parammaster_enter";
import TrnType_Enter from "./components/trntype_enter";
import TotalRights_Enter from "./components/totalrightsmst_enter";
import TicketMaster_Enter from "./components/ticketmaster_enter";
import AllCompanies from "./components/companymstlist";
import AllCustomers from "./components/customermstlist";
import AllParam from "./components/parammstlist";
import AllTickets from "./components/ticketmstlist";
import AllTotalRights from "./components/totalrightsmstlist";
import AllTrnTypes from "./components/trntypelist";
import AllUsers from "./components/usermstlist";
import AllUsersRights from "./components/userrightsmstlist";
import notfound from "./components/default";
import CompanyMaster_Edit from "./components/editcompany";
import CustomerMaster_Edit from "./components/editcustomer";
import ParamMaster_Edit from "./components/editparam";
import TicketMaster_Edit from "./components/editticket";
import TotalRightsMaster_Edit from "./components/edittotalrights";
import TrnType_Edit from "./components/edittrntype";
import UserMaster_Edit from "./components/edituser";
import UserRightsMaster_Edit from "./components/edituserrights";
import Admin_Panel from "./components/adminpanel";
import Nav from "./components/nav_component";
function App() {
  const [name, setName] = useState("");

  return (
    <BrowserRouter>
      <div className="App">
        <Nav loginName={name} />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/cpmenter" component={CompanyMaster_Enter} />
          <Route exact path="/login" component={Login} />
          <Route exact path="/register" component={Register} />
          <Route exact path="/ctmenter" component={CustomerMaster_Enter} />
          <Route exact path="/prmenter" component={ParamMaster_Enter} />
          <Route exact path="/trnenter" component={TrnType_Enter} />
          <Route exact path="/trmenter" component={TotalRights_Enter} />
          <Route exact path="/tcmenter" component={TicketMaster_Enter} />
          <Route exact path="/companymst" component={AllCompanies} />
          <Route exact path="/customermst" component={AllCustomers} />
          <Route exact path="/parammst" component={AllParam} />
          <Route exact path="/ticketmst" component={AllTickets} />
          <Route exact path="/trmst" component={AllTotalRights} />
          <Route exact path="/trntype" component={AllTrnTypes} />
          <Route exact path="/usermst" component={AllUsers} />
          <Route exact path="/userrightsmst" component={AllUsersRights} />
          <Route exact path="/admin" component={Admin_Panel} />
          <Route
            exact
            path="/upcompanymaster/:CmpnyCode"
            component={CompanyMaster_Edit}
          />
          <Route
            exact
            path="/upcustomermaster/:AccCode"
            component={CustomerMaster_Edit}
          />
          <Route
            exact
            path="/upparammaster/:ParamID"
            component={ParamMaster_Edit}
          />
          <Route
            exact
            path="/upticketmaster/:DocNo"
            component={TicketMaster_Edit}
          />
          <Route
            exact
            path="/uptotalrightsmaster/:RID"
            component={TotalRightsMaster_Edit}
          />
          <Route exact path="/uptrntype/:TrnTypeId" component={TrnType_Edit} />
          <Route
            exact
            path="/upusermaster/:UserID"
            component={UserMaster_Edit}
          />
          <Route
            exact
            path="/upuserrightsmaster/:UserID"
            component={UserRightsMaster_Edit}
          />
          <Route component={notfound} />
        </Switch>
        <Login putName={(name) => setName(name)} />
      </div>
    </BrowserRouter>
  );
}

export default App;

login_component:

import "bootstrap/dist/css/bootstrap.min.css";
import React, { useState, useEffect } from "react";
import axios from "axios";

function Login(props) {
  const [LoginID, setLoginID] = useState("");
  const [Password, setPassword] = useState("");
  const [LoginStatus, setLoginStatus] = useState("");

  axios.defaults.withCredentials = true;

  const login = (event) => {
    axios
      .post("http://localhost:8000/login", {
        LoginID: LoginID,
        Password: Password,
      })
      .then((response) => {
        if (response.data.message) {
          setLoginStatus(response.data.message);
        } else {
          setLoginStatus(response.data[0].UserFullName);
        }
      });
  };

  useEffect(() => {
    axios.get("http://localhost:8000/login").then((response) => {
      if (response.data.loggedIn === true) {
        setLoginStatus(response.data.user[0].UserFullName);
      }
    });
  }, []);

  return (
    <div className="App">
      <div className="auth-wrapper">
        <div className="auth-inner">
          <form onSubmit={login}>
            <h3>Log In</h3>

            <div className="form-group">
              <label>Login ID</label>
              <input
                type="text"
                className="form-control"
                placeholder="First Name"
                onChange={(e) => {
                  setLoginID(e.target.value);
                }}
              />
            </div>

            <div className="form-group">
              <label>Password</label>
              <input
                type="password"
                className="form-control"
                placeholder="Password"
                onChange={(e) => {
                  setPassword(e.target.value);
                }}
              />
            </div>

            <button
              className="btn btn-primary btn-block"
              onClick={() => props.putName({ LoginStatus })}
            >
              Login
            </button>
          </form>
          <h1>{LoginStatus}</h1>
        </div>
      </div>
    </div>
  );
}

export default Login;

nav_component:

import React from "react";
import { Link } from "react-router-dom";

function Nav(props) {
  return (
    <nav className="navbar navbar-expand navbar-light fixed-top">
      <ul class="nav">
        <li class="nav-item">
          <Link to={"/"} class="nav-link active" aria-current="page">
            Home
          </Link>
        </li>
        <li class="nav-item">
          <Link to={"/register"} class="nav-link">
            Register
          </Link>
        </li>
        <li class="nav-item">
          <Link to={"/login"} class="nav-link">
            Login
          </Link>
        </li>
        <li class="nav-item">
          <Link
            to={"/admin"}
            class="nav-link"
            //tabindex="-1"
            //aria-disabled="true"
          >
            Admin
          </Link>
        </li>
      </ul>
      <ul class="username">
        <li>{props.loginName}</li>
      </ul>
    </nav>
  );
}

export default Nav;

请注意，我在 App.js 中使用了底部的标签，因此每当应用程序加载时，它都会显示主页而不是登录页面。另外要注意的是，我避免使用 redux，因为我不熟悉它。

Answer 1

我意识到最好的解决方案确实是在 redux 的帮助下做同样的事情。因此，我也会向任何有相同查询的人推荐这个

Reactjs-如何在导航栏上显示用户名

Reactjs- How can I display username on the Navbar

javascript

reactjs

react-props