点击“提交”按钮后，React 函数组件会重新渲染，并且 useRef 值也会消失

问题描述

下面的代码是我在 React 中的 Login.js 函数组件。

在我的 <App.js/> 中，我只渲染了 <Login/> 组件，一切似乎都可以正常工作，直到我点击“提交”并且我的整个 Login.js 组件重新渲染并且我丢失了所有状态变量.

即使我将状态变量保存在 'credentials' useRef 中，它也会以某种方式消失。

如果您能告诉我为什么我的 <Login/> 组件在我将我的“电子邮件”和“密码”传递给函数“handleLogin()”后重新呈现，我们将不胜感激。

我的目标是

• 了解组件生命周期在我的登录功能组件中是如何工作的
• 安全地存储电子邮件和密码的状态值，以便我以后可以使用它 登录身份验证。

在我点击提交后，组件重新渲染并记录：

import { React,useRef,useEffect,useState } from "react";
import { Form,Button,Container } from "react-bootstrap";

export default function Login() {
    const [email,setEmail] = useState("");
    const [password,setPassword] = useState("");

    const credentials = useRef({e:'defaulut email',p:'default password'})

    console.log('\n')
    console.log("re-render");
    console.log("email:",email);
    console.log("password:",password);

    console.log(credentials.current)

    const handleLogin = (emaill,passwordd) => {
        console.log("email:",emaill);
        console.log("password:",passwordd);

        credentials.current.e = email;
        credentials.current.p = password;

    };

    return (
        <Container className="mt-5">
            <Form>
                <Form.Group controlId="formBasicEmail">
                    <Form.Label>Email address</Form.Label>
                    <Form.Control
                        type="email"
                        placeholder="Enter email"
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                    />
                    <Form.Text className="text-muted">
                        We'll never share your email with anyone else.
                    </Form.Text>
                </Form.Group>
                <Form.Group controlId="formBasicPassword">
                    <Form.Label>Password</Form.Label>
                    <Form.Control
                        type="password"
                        placeholder="Password"
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                    />
                </Form.Group>
                <Button
                    variant="primary"
                    type="submit"
                    onClick={() => {
                        handleLogin(email,password);
                    }}
                    >
                    Submit
                </Button>
            </Form>
        </Container>
    );
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）