Question

我未能成功将 State Hook 传递给 React Js 中的子功能组件。传递的函数打印 undefined 并且控制台显示“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 组件，或者如果您想保留相同的逻辑，则在 {{1} 中的 else 条件中} 组件，你必须传入一个名为 App 的渲染属性函数，这样它就不会导致错误，就像这样：

updateUser

我建议修改你的逻辑并按照我之前的建议去做。

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

1 个答案: