Question

我对React很陌生，目前正在学习react挂钩。最近遇到了一个要求，即用户会话必须存储到本地存储并在应用启动时检索。但是，我受困于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>
    )
}

我找到了很多与此有关的文章，但是没有人特别重视这种情况。一些正在将表单逻辑移到外部（HoC），其他正在将表单数据传播到全局状态。我要实现的是表单数据的本地范围（和管理），错误。

其他人建议采用消费者实施方式，例如：

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

但是，仍然有我想实现onSubmit的逻辑，不仅调用这种方法userHasAuthenticated。

欢迎任何帮助！

是否可以以编程方式调用React Hook + Context API？

0 个答案: