從本地存儲中獲取用戶信息 - getUser

Question

我正在嘗試在導航欄上的應用程序中打印登錄用戶的名稱。 我正在使用 getUser function 在本地存儲中查找登錄用戶。 有人可以解釋我出了什么問題/並指導我找到解決方案嗎？ 我試過谷歌搜索，但不是很清楚..

我得到的控制台錯誤如下：

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
        in p (at Navbar.js:30)
        in nav (at Navbar.js:28)
        in Navbar (at Default.js:8)
        in div (at Default.js:7)
        in Default (at Allchallenges.js:84)

---

//getUser
export const getUser = (user) => {
    console.log("user has been GET out of local storage (just before)")
    return JSON.parse(window.localStorage.getItem("user"))
}

//setUser
export const setUser = (user) => {
    window.localStorage.setItem("user", JSON.stringify(user))
    console.log("user has been SET out of local storage")
}


key:user

{friends: [], _id: "5ec5677db5b0fb73d48a3f23", username: "charlescodingtonight",…}
friends: []
password: "$2b$10$ZWLg4cK1YFiZbgxRlroKHu5l9Hicf1/wxMWhf0lFIdyXrGdyLNFDy"
username: "charlescodingtonight"
__v: 0
_id: "5ec5677db5b0fb73d48a3f23"

---

import React from "react"
import './Navbar.css';
import {Link} from "react-router-dom";
import {logout, getUser} from "../utils/auth"

class Navbar extends React.Component {
    constructor() {
        super()

        this.state = {

        }
    }

    handleLogout(user){
        logout(user)
    }

    handleUser(user){
        const theLoggedUser = getUser(user)
        console.log(theLoggedUser)
        return theLoggedUser
    }

    render() {
        return (
            <nav className="navcontainer">
                <Link to="/allchallenges"><img className="logostreet" src="/images/logo.png" alt="logo" /></Link>
                <p className="welcomemessage">Welcome {this.handleUser}</p>
                <Link to="/allchallenges"><strong>All challenges</strong></Link>
                <Link to="/startchallenge"><strong>Start a challenge</strong></Link>
                <Link to="/profile"><strong>Profile settings</strong></Link>
                <Link to="/friends"><strong>Friends</strong></Link>
                <Link to="/about"><strong>About</strong></Link>
                <Link to="/" onClick={this.handleLogout}><strong>Log out</strong></Link>
            </nav>            
        )
    }
}

export default Navbar

Answer 1

getUser function 返回一個 object 並且不能用 jsx 渲染。 您需要獲取用戶的用戶名而不是整個用戶 object

更改handleUser function 以返回用戶的用戶名

handleUser(user){
    const theLoggedUser = getUser(user)
    return theLoggedUser.username
}

您還需要調用此 function

<p className="welcomemessage">Welcome { this.handleUser() }</p>

Answer 2

在這里，您返回字符串和 function: <p className="welcomemessage">Welcome {this.handleUser}</p> 。

我想你想要這個： <p className="welcomemessage">Welcome {this.handleUser()}</p> 。