React setState hook 不断重置和渲染页面两次答案

【问题标题】：React setState hook keeps resetting and rendering the page twiceReact setState hook 不断重置和渲染页面两次
【发布时间】：2021-07-19 17:34:25
【问题描述】：

我有一个 react 应用程序 Form 组件拆分为 Login 和 Signup 表单。默认情况下应该呈现Signup，但如果单击登录按钮，则切换到Login。单击login 按钮时，页面会非常短暂地切换到Login 表单，然后再切换回Signup 表单。我不知道这是什么原因造成的。我尝试将const [page, setPage] = setState("signup") 放在父App 中，并将setPage 作为道具与page 一起传递。这产生了相同的结果。我相信这个问题类似于this one，但没有解决。这是应用程序：

import Form from "./components/Signup-Form.js";
function App() {
    return (
        <div className="App">
            <h1>Welcome</h1>
            <Form />
        </div>
    );
}

export default App;

和Signup-Form.js:

import React from "react";
import { useState, useEffect } from "react";
import "./Forms.css";
import { InputField, Buttons } from "./Inputs";
function Form() {
    const [page, setPage] = useState("signup");
    const pageLabel = page;

    let Signup = () => {
        function toLogin() {
            setPage("login");
        }
        return (
            <form action="" method="get" className="form">
                <div className="input-container">
                    <InputField name="Company Name" id="comp-name" type="text" />
                    <InputField name="Company ID" id="comp-id" type="text" />
                    <InputField name="Username" id="username" type="text" />
                    <InputField name="Email" id="email" type="email" />
                    <InputField name="Password" id="password" type="password" />
                    <InputField name="Confirm Password" id="confirm-password" type="password" />
                </div>
                <div className="btns">
                    <Buttons name="Sign Up" id="signup-btn" type="submit" cls="success" />
                    <Buttons name="Log In" id="login-btn" type="button" cls="success" alt="true" onClick={toLogin} />
                </div>
            </form>
        );
    };
    let Login = () => {
        function toSignup() {
            setPage("signup");
        }
        return (
            <form action="" method="get" className="form">
                <div className="input-container">
                    <InputField name="Company ID" id="comp-id" type="text" />
                    <InputField name="Password" id="password" type="password" />
                </div>
                <div className="btns">
                    <Buttons name="Log In" id="login-btn" type="submit" cls="success" />
                    <Buttons name="Sign Up" id="signup-btn" type="submit" cls="success" alt onClick={toSignup} />
                </div>
            </form>
        );
    };
    let form = (formType) => (
        <div className="outer-wrapper">
            <div className="form-wrapper">
                <label className="form-title">{pageLabel}</label>
                {formType}
            </div>
        </div>
    );
    if (page === "signup") {
        const signup = Signup();
        return form(signup);
    } else if (page === "login") {
        const login = Login();
        return form(login);
    }
}

export default Form;

【问题讨论】：

标签： javascript reactjs forms react-state

【解决方案1】：

在您单击登录按钮并获取登录页面并且该页面立即重新呈现并且您得到注册页面之后的原因是您的示例中的条件渲染。单击登录按钮后，您的状态仍然是以前的状态，因此单击后您将获得主（注册）页面。

建议将结构渲染改成这样：

...
return (
  <div className="outer-wrapper">
    <div className="form-wrapper">
      <label className="form-title">{pageLabel}</label>
      {page === "signup" && Signup()}
      {page === "login" && Login()}
    </div>
  </div>
);

这是一个动作中的示例 - https://codesandbox.io/s/smoosh-water-6jj18?file=/src/App.js

【讨论】：