Я новичок с 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
.
Любая помощь приветствуется!