如何通过钩子 function 反应功能组件

Question

I have been unsuccessful at passing a State Hook to a child functional component in React Js. The passed function prints undefined and the console says "error signing in TypeError: updateUser is not a function". The parent component is the App.js component and the child component is LoginPage.js. My end goal is ensure the user is authenticated throughout the app using AWS Cognito/AWS Amplify. If the user state is not authenticated, I send the user to the LoginPage.

Specifically, as seen below, i pass "updateUser={updateUser}" to the LoginPage.js component, it is read as "LoginPage({updateUser})", and used as "updateUser(user)". The simplified parent and child components are as followed:

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

I think the problem is that in both cases, that is when user is authenticated as well as when user is not authenticated, you are rendering the LoginPage .

So you have to either update your logic to show LoginPage component only when the user is not logged in or if you want to keep same logic, then in the else condition in App component, you have to pass in a render prop function called updateUser , such that it doesn't lead to error, like so:

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

I recommend modifying your logic and going with my former suggestion.