如何传递钩子函数来反应功能组件

Question

我在 React Js 中将 State Hook 传递给子功能组件没有成功。传递的函数打印未定义，控制台显示“TypeError 中的错误签名：updateUser 不是函数”。父组件是 App.js 组件，子组件是 LoginPage.js。我的最终目标是确保使用 AWS Cognito/AWS Amplify 在整个应用程序中对用户进行身份验证。如果用户状态未通过身份验证，我将用户发送到 LoginPage。

具体来说，如下所示，我将“updateUser={updateUser}”传递给 LoginPage.js 组件，它被读取为“LoginPage({updateUser})”，并用作“updateUser(user)”。简化的父子组件如下：

function App() {

    const [user, updateUser] = useState(null);

    useEffect(() => {
        checkUser()
    }, []
    )

    async function checkUser() {
        try {
            const user = await Auth.currentAuthenticatedUser();
            updateUser(user)
        }
        catch (e) {
            console.log(e)
        }
    }

    if (!user) {
        return <LoginPage updateUser={updateUser} />
    } else {
        return (
            <div>
                <BrowserRouter>
                    <Switch>
                        <Route path="/" component={LoginPage} exact />
                        <Route path="/HomePage" component={HomePage} exact />
                    </Switch>
                </BrowserRouter>
            </div>
        );
    }
}

export default App;

        export default function LoginPage({updateUser}) {
    
    async function signIn(e) {
        e.preventDefault()
        const {email, password} = formState
        try {
            await Auth.signIn(email, password);
 
            const user  = await Auth.currentAuthenticatedUser();

            console.log(updateUser) // updateUser is undefined

            updateUser(user)
            })

        } catch (error) {
           console.log(error)
        }
    }

    return (
                <div>
                    // Login page here, but irrelevant
                <div>
)
}

LoginPage.propTypes = {
    updateUser: PropTypes.func.isRequired
}

Answer 1

我认为问题在于，在这两种情况下，即用户通过身份验证以及用户未通过身份验证时，您都在渲染LoginPage。

因此，您必须更新您的逻辑以仅在用户未登录时显示LoginPage 组件，或者如果您想保持相同的逻辑，那么在App 组件中的else 条件下，您必须传入一个名为 updateUser 的渲染道具函数，这样它就不会导致错误，如下所示：

<Route exact path="/" render={(props) => <LoginPage updateUser={(args) => console.log("Your update function")} {...props} />} />

我建议修改你的逻辑并按照我之前的建议进行。