将 useState 反应为切换触发器重新渲染并在重新渲染时重新初始化 false

Question

我有一个简单的问题。 我正在使用基于 useState 的 React 切换函数来切换组件的渲染。 它可以工作，但在定义切换函数的父组件的重新渲染时，它会将该状态重新初始化为 false，因此再次隐藏 RegisterForm 组件。 我在这里缺少什么？

import RegisterForm from "./forms/Registerform";
import LoginForm from "./forms/LoginForm";
import { useState } from "react";
import useToggle from "./helpers/useToggle";
const LoginOrRegister = () => {
    const [toggle, setToggle] = useToggle(false)

    return(
    
        <>
        <div className="login">
        <p>Login to your user account</p>
        <LoginForm/>
        </div>
        <div className="register">
            <a href="" onClick={setToggle}>Not yet signed up? Register here</a>
            {toggle &&(<RegisterForm/>)}
        </div>
        </>
    )
}
export default LoginOrRegister;

这是 useToggle 自定义挂钩。

import { useState } from "react";
const useToggle = (initialState) => {
    const [toggleValue, setToggleValue] = useState(initialState);

    const toggler = () => { setToggleValue(!toggleValue) };
    return [toggleValue, toggler]
  };

  export default useToggle

Answer 1

一种选择是在父组件（重新渲染）上使用自定义 useToggle 钩子并将数据传递给子组件

const LoginOrRegister = ({toggle, setToggle}) => { ... }