Можно ли программно вызывать React Hook + Context API? - PullRequest
0 голосов
/ 27 марта 2020

Я новичок с React и в настоящее время изучаю хуки реакции. Недавно возникли требования, согласно которым сеанс пользователя будет сохранен в localstorage и получен при запуске приложения. Тем не менее, я застрял с компонентом Login, где при отправке формы необходимо распространить пользователя в глобальное состояние (через контекст).

export default function Login() {
    const [email, setEmail] = useState(null)
    const [password, setPassword] = useState(null)
    const [error, setError] = useState(null)

    const handleSubmit = async (event) => {
        event.preventDefault()
        setError(null)
        try {
            // authenticate(email, password)
            // HOW TO PROPAGATE?
        } catch (e) {
            // update UI
        }
    }

    return (
        <Container>
            <Row>
               <Form onSubmit={handleSubmit}>
                  <Form.Control size="lg" 
                                placeholder="Email" value={email} 
                                onChange={e => setEmail(e.target.value)} />

                  <Form.Control size="lg" 
                                type="password" placeholder="Password" value={password}
                                onChange={e => setPassword(e.target.value)} />

                  <Button type="submit" size="lg">Login</Button>
              </Form>
            </Row>
        </Container>
    )
}

Это завернуто в Provider, который предоставляет механизм для установки текущего состояния пользователя ( userHasAuthenticated):

const UserProvider = props => {
    const [state, setState] = useLocalStorage('AUTH_USER', {})
    return (
        <UserContext.Provider
            value={{
                data: state,
                userHasAuthenticated: (user) => { setState(user) }
            }}
        >
            {props.children}
        </UserContext.Provider>
    )
}

Я нашел много статей по этому поводу, но ни одна из них не касалась этого случая. Некоторые перемещали логи формы c наружу (Ho C), другие распространяли данные формы в глобальное состояние. Чего я хочу добиться, так это локальной области видимости (и управления) данными формы, ошибки.

Другие предлагают потребительскую реализацию, такую ​​как:

<UserContext.Consumer>
{context => (<Fragment>... this function has access to userHasAuthenticated ...)}
</UserContext.Consumer>

Однако, все еще есть логика c, которую я хочу чтобы реализовать onSubmit, не только вызывать такой метод userHasAuthenticated.

Любая помощь приветствуется!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...