React Native：“渲染的钩子比预期的要少。”不知道这意味着什么，应用程序崩溃？

Question

我有一个 AuthScreen 应该处理所有的登录、注册、忘记密码等逻辑。代码如下：

import React, { useState } from 'react';
import { RootStateOrAny, useDispatch, useSelector } from "react-redux";
import { authForgotPassword, authLogin, authRegister } from '../store/actions/authActions';

import ForgotPassword from '../components/Auth/ForgotPassword';
import Login from '../components/Auth/Login';
import PageType from '../utils/PageType';
import Register from '../components/Auth/Register';
import { StackNavigationProp } from '@react-navigation/stack';

type ParamList = {
    AuthLoadingScreen: undefined;
    HomeTabScreen: undefined;
    AuthScreen: undefined
}

type AuthScreenNavigationProp = StackNavigationProp<ParamList, 'AuthScreen'>;

type Props = {
    navigation: AuthScreenNavigationProp;
}

export default function AuthScreen({ navigation }: Props) {
    const dispatch = useDispatch();
    const user = useSelector((state: RootStateOrAny) => state.auth.user);
    
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [password2, setPassword2] = useState('');

    const [showPage, setShowPage] = useState(PageType.Login);

    const changePage = (pageType: PageType) => {
        setEmail('');
        setPassword('');
        setPassword2('');
        setShowPage(pageType);
    }

    const login = () => {
        dispatch(authLogin(email, password));
    }

    const register = () => {
        if (password === password2) {
            dispatch(authRegister(email, password));
        } else {
            alert('Passwords must match!');
        }
    }

    const forgotPassword = () => {
        dispatch(authForgotPassword(email, changePage));
    }

    if (user) {
        navigation.navigate('HomeTabScreen');
        return null;
    } else {
        switch(showPage) {
            case PageType.Login: {
                return Login(email, setEmail, password, setPassword, changePage, login);
            }
            case PageType.Register: {
                return Register(email, setEmail, password, setPassword, password2, setPassword2, changePage, register);
            }
            case PageType.ForgotPassword: {
                return ForgotPassword(email, setEmail, changePage, forgotPassword);
            }
            default: return Login(email, setEmail, password, setPassword, changePage, login);
        }
    }
}

我有组件“登录”、“注册”和“忘记密码”，每个组件都显示（返回）不同的布局、操作等。

所以我制作了一个钩子和一个开关盒，例如在“登录”组件中按下“在此处注册”时，它将使用 REGISTER 页面值调用“changePage”。它应该重新渲染“AuthScreen”，看到“showPage”值更改为“REGISTER”，然后再次进入我的 switch-case，并返回“REGISTER”值。无论如何，这就是我的想法。

尝试设置 showPage 挂钩“setShowPage(pageType);”时发生错误在“changePage”功能中。如果我对此发表评论，应用不会崩溃，但也不会更改页面。

这是什么意思，我该如何修复我的屏幕？

Answer 1

虽然我建议为此使用react-navigation，但问题似乎在于您返回组件并将道具传递给它们的方式，例如Login(email, setEmail, password, setPassword, changePage, login)应该是<Login email={email} setEmail={setEmail} password={password} setPassword={setPassword} changePage={changePage} login={login}/>

import React, { useState } from 'react';
import { RootStateOrAny, useDispatch, useSelector } from "react-redux";
import { authForgotPassword, authLogin, authRegister } from '../store/actions/authActions';

import ForgotPassword from '../components/Auth/ForgotPassword';
import Login from '../components/Auth/Login';
import PageType from '../utils/PageType';
import Register from '../components/Auth/Register';
import { StackNavigationProp } from '@react-navigation/stack';

type ParamList = {
    AuthLoadingScreen: undefined;
    HomeTabScreen: undefined;
    AuthScreen: undefined
}

type AuthScreenNavigationProp = StackNavigationProp<ParamList, 'AuthScreen'>;

type Props = {
    navigation: AuthScreenNavigationProp;
}

export default function AuthScreen({ navigation }: Props) {
    const dispatch = useDispatch();
    const user = useSelector((state: RootStateOrAny) => state.auth.user);
    
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [password2, setPassword2] = useState('');

    const [showPage, setShowPage] = useState(PageType.Login);

    const changePage = (pageType: PageType) => {
        setEmail('');
        setPassword('');
        setPassword2('');
        setShowPage(pageType);
    }

    const login = () => {
        dispatch(authLogin(email, password));
    }

    const register = () => {
        if (password === password2) {
            dispatch(authRegister(email, password));
        } else {
            alert('Passwords must match!');
        }
    }

    const forgotPassword = () => {
        dispatch(authForgotPassword(email, changePage));
    }

    if (user) {
        navigation.navigate('HomeTabScreen');
        return null;
    } else {
        switch(showPage) {
            case PageType.Login: {
                return <Login email={email} setEmail={setEmail} password={password} setPassword={setPassword} changePage={changePage} login={login}/>
            }
            case PageType.Register: {
                return <Register email={email} setEmail={setEmail} password={password} setPassword={setPassword} password2={password2} setPassword2={setPassword2} changePage={changePage} register={register}/>
            }
            case PageType.ForgotPassword: {
                return <ForgotPassword email={email} setEmail={setEmail} changePage={changePage} forgotPassword={forgotPassword}/>
            }
            default: return <Login email={email} setEmail={setEmail} password={password} setPassword={setPassword} changePage={changePage} login={login}/>
        }
    }
}

Answer 2

据我了解，登录/注册/忘记密码是功能组件。那些应该像

一样返回

return <Login email={email} setEmail={setEmail} ... />

而不仅仅是像现在这样的普通函数调用：

return Login(email, setEmail)

如果你没有使用 jsx/tsx，那么你应该这样称呼它：

React.createElement(Login, { email, setEmail, ... }, ...children)

但一般来说，你为什么不直接使用 React Router 并为 Login、Register、ForgotPassword 等添加一个单独的 <Route /> 而不是这个组件？那将是一个更优雅的解决方案。