javascript - 重定向没有在本地存储中保存价值

Question

那是我的所有代码，一个简单的页面，用户将他的名字输入输入并单击要重定向的按钮，但是在setItem之前执行该函数的方式是该值不会进入localstorage

    function Singup() {

    const history = useHistory();

    const [username, setUsername] = useState('')

    function NameValue(event) {
        event.preventDefault()

        const formData = new FormData(event.target);
        const data = Object.fromEntries(formData);

        setUsername(data.name)

        history.push('/MainScreen')
    }

    localStorage.setItem('DataUser', username)

    return (
        <main className="all">
            <div className="bloco">
                <h2>Welcome to CoadLeap network!</h2>
                <p>Please enter your username</p>
                <form className="formulario" onSubmit={NameValue}>
                    <div className="form-group">
                        <div className="field">
                            <h2>What's in your mind?</h2>
                            <input
                                placeholder="Insira um nome aqui!"
                                type="text"
                                name="name"
                                className="form-input"
                            />
                        </div>
                        <button
                            type="submit"
                            className="singup-btn"
                        >Singup</button>
                    </div>
                </form>
            </div>
        </main>
    )
}

标签： javascripthtmlcssreactjsreact-hooks

Answer 1

setItem用户提交表单后立即调用：

 function NameValue(event) {
    event.preventDefault()

    const formData = new FormData(event.target);
    const data = Object.fromEntries(formData);

    setUsername(data.name)
    localStorage.setItem('DataUser', data.name)
    history.push('/MainScreen')
}