LocalStorage 和 SessionStorage 不起作用 React.js

Question

我正在使用 ReactJS 構建一個應用程序，它有一個登錄模塊並且將有一個角色系統。 此刻，我在登錄部分，但我有一個錯誤，讓我無法繼續。

我正在存儲使用名稱“authenticatedUser”登錄到 localStorage 的用戶名，但它從未保存過。 我注意到，如果我得到 history.push ..... localStorage.setItem()不起作用。 有誰知道為什么會發生這種情況或我該如何解決？ 我留下我的代碼：

登錄：

import React, { useState } from 'react';
import { Form, Button } from 'react-bootstrap'
import { useHistory, Link } from "react-router-dom";
import { AuthenticationService } from '../services/AuthenticationService.js'
import '../assets/css/Login.css'

export const Login = () => {

    const history = useHistory();
    const initialValues = {
        userName: '', password: ''
    };
    const [values, setValues] = useState(initialValues);

    function loginClicked(e) {
        if (values.userName === 'a@a.a' && values.password === 'a') {
            AuthenticationService.registerSuccessfullLogin(values.userName);
            history.push({
                pathname: '/welcome',
                state: { name: values.userName }
            });
        } else {
            e.preventDefault();
            alert("Parametros incorrectos");
        }
    }

    return (
        <div className="login">
            <Form onSubmit={(e) => loginClicked(e)}>
                <Form.Group controlId="formBasicEmail">
                    <Form.Label>Email</Form.Label>
                    <Form.Control
                        type="email"
                        placeholder="Enter email"
                        value={values.userName}
                        onChange={({ target: { value } }) => setValues({ ...values, userName: value })}
                    />
                </Form.Group>

                <Form.Group controlId="formBasicPassword">
                    <Form.Label>Password</Form.Label>
                    <Form.Control
                        type="password"
                        placeholder="Password"
                        value={values.password}
                        onChange={({ target: { value } }) => setValues({ ...values, password: value })}
                    />
                </Form.Group>
                <Form.Group controlId="formBasicCheckbox">
                    <Form.Check type="checkbox" label="Recordar usuario" />
                </Form.Group>
                <div className="boton">
                    <Button variant="primary" type="submit">
                        Ingresar
                    </Button>
                </div>
                <div>
                    <Link to="/registry" className="financionacion-link">
                        No estas registrado? Registrate!
                    </Link>
                </div>
            </Form>

        </div>
    );
}

AuthenticationService（我在其中制作 setItem）：

export const AuthenticationService = {
    registerSuccessfullLogin(userName) {
        localStorage.setItem('authenticatedUser', userName);
    },
    logout(userName) {
        localStorage.removeItem('authenticatedUser');
    },
    isUserLoggedIn() {
        let user = localStorage.getItem('authenticatedUser')
        if (user === null) return false
        return true
    }
}

當我在設置名稱后立即停止程序時，我可以看到變量正常到達，如果我當時查看存儲，變量被保存。 但是當 history.push 完成時，存儲被刪除。

圖 1：

圖 2：

Answer 1

我發現了問題，這是我的錯誤，我有一個導航鏈接，即注銷，它執行了操作。

前：

<Nav>
   <Nav.Link href="/" onClick={AuthenticationService.logout()}>Logout</Nav.Link>
</Nav>

現在：

<Nav>
   <Nav.Link href="/" onClick={() => AuthenticationService.logout()}>Logout</Nav.Link>
</Nav>

非常感謝大家，問候。