根據 localStorage 有條件地渲染組件

Question

當 localStorage 通過更改狀態更改時，我正在嘗試重新渲染組件。 問題是如果我在useEffect鈎子頁面中設置狀態不會重新渲染。 如果我把它放在useEffect之外，我會得到無限循環。 我確定 localStorage 會發生變化，因為刷新頁面時我得到了想要的結果。 這是我的代碼片段：

function Header(props) {

    const [auth, setAuth] = useState({loggedIn : false})


    useEffect(() => {
        if (localStorage.getItem('auth')) {
            setAuth(JSON.parse(localStorage.getItem('auth')))
        }
    },[])


    const logOut = () => {
        localStorage.removeItem('auth');
        setAuth({loggedIn : false});
    }

    let listContainer = (
        <div className={styles.LinkContainer}>
        <div className={styles.NavigationLink} onClick={props.openLoginModal}>Login</div>
        <div className={styles.NavigationLink} onClick={props.openRegistrationModal}>Register</div>
    </div>
    )
    if (auth.loggedIn) {
        listContainer = (
        <div className={styles.LinkContainer}>
            <div className={styles.NavigationLink}>Weekly plan</div>
            <div className={styles.NavigationLink}>Shopping list</div>
            <div className={styles.NavigationLink}>Options</div>
            <div className={styles.NavigationLink} onClick={logOut}>Logout</div>
        </div>
        )
    }

    return (
        <div className={styles.Container}>
            <img src="/logo.png"
                alt="HiFoodelity logo"
                className={styles.LogoImage} />
            {listContainer}
        </div>
    )
}

Answer 1

你想要做什么，因為每次組件渲染時都會調用 useEffect() ，並且你改變狀態會導致組件重新渲染，這樣你的組件就會處於無限渲染狀態。

Answer 2

我通過從僅在頁面加載時執行的 useEffect 鈎子中刪除 [] 來解決它，而不是這樣：

useEffect(() => {
    if (localStorage.getItem('auth')) {
        setAuth(JSON.parse(localStorage.getItem('auth')))
    }
},[])

我是這樣寫的：

useEffect(() => {
    if (localStorage.getItem('auth') && auth.loggedIn === false) {
        setAuth(JSON.parse(localStorage.getItem('auth')))
    }
})