Блог

Мне не удалось передать перехват состояния дочернему функциональному компоненту в React Js. Переданная функция выводит undefined, а консоль сообщает: «Ошибка входа в TypeError: UpdateUser не является функцией». Родительским компонентом является App.js компонент, а дочерний компонент — это LoginPage.js . Моя конечная цель — обеспечить аутентификацию пользователя во всем приложении с помощью AWS Cognito / AWS Amplify. Если состояние пользователя не аутентифицировано, я отправляю пользователя на страницу входа.

В частности, как показано ниже, я передаю «UpdateUser={UpdateUser}» в LoginPage.js компонент, он читается как «LoginPage({UpdateUser})» и используется как «UpdateUser (пользователь)». Упрощенные родительский и дочерний компоненты следующие:

 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
}

 

Я думаю, проблема в том, что в обоих случаях, то есть когда пользователь аутентифицируется, а также когда пользователь не аутентифицирован, вы визуализируете LoginPage .

Итак, вам нужно либо обновить свою логику, чтобы показывать LoginPage компонент только тогда, когда пользователь не вошел в систему, либо, если вы хотите сохранить ту же логику, тогда в else условии в App компоненте вы должны передать вызываемую функцию render prop updateUser , чтобы это не приводило к ошибке, например:

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

Я рекомендую изменить вашу логику и придерживаться моего предыдущего предложения.