Как мне обновить контекст React после ответа Axios - PullRequest
Новая
       15

Как мне обновить контекст React после ответа Axios

0 голосов
/ 13 января 2019

Краткое объяснение

Итак, я хочу добиться следующего: после подтверждения того, что адрес электронной почты и пароль пользователя верны, состояние входа в систему должно измениться с ложного на истинное. Однако это состояние входа настраивается в моем App.js, а подтверждение входа - в моем Login.js.

код

В моем App.js у меня есть следующий код: 

<UserProvider value={{
    loggedIn: this.state.loggedIn,
    actions: {
        logIn: event => {
            this.setState({ loggedIn: true }) 
        }
    }
}}>
    <Route path='/' component={Login} />
</UserProvider>

В моем Login.js у меня настроена функция стрелки после того, как пользователь нажимает кнопку входа в систему. 

requestAuth = () => {
        axios({
            method: 'post',
            url: process.env.REACT_APP_API_AUTH,
            data: {
                username: 'test',
                password: 'test'
            }
        })
        .then(
            (response) => {
                console.log(response)
                this.setState({
                    feedback: "Alright, welcome back! I'm gonna log you in!"
                })
            }
        )
        .catch(
            (error) => {
                console.log(error)
                this.setState({
                    feedback: "Sorry, I think your e-mail or password is incorrect. Wanna try again?"
                })
            }
        );

    }
render () {
    return (
        <UserConsumer>
            {({ actions }) => {
                return(
                    <div onClick={this.requestAuth}>
                    </div>
                )
            }}
        </UserConsumer>
    )
}

Вопрос

Однако я не понимаю, как обновить набор событий 'actions.Login' в App.js после успешного выполнения запроса на вход.

Ответы [ 2 ]

0 голосов
/ 13 января 2019

Эта проблема может быть решена с помощью context и contextType, хотя это можно считать быстрым и грязным исправлением; они были в основном введены для обновления устаревшего кода, который опирается на старый context. Проблема этого подхода заключается в том, что компонент ограничен одним контекстом одновременно.

Решение состоит в том, чтобы подключить компонент к контексту с HOC, который работает аналогично Redux connect: 

withUserConsumer = Comp => props => (
  <UserConsumer>
    {user => <Comp user={user} ...props />}
  </UserConsumer>;
);

const LoginWithUser = withUserConsumer(Login);

Затем LoginWithUser получает user объект в качестве реквизита, который можно использовать в таких компонентных методах, как requestAuth.

0 голосов
/ 13 января 2019

requestAuth требуется доступ к методу logIn: onClick={() => this.requestAuth(actions)}

И тогда requestAuth сам может выглядеть так: 

requestAuth = (actions) => {
    axios(/* ... */)
    .then(
        (response) => {
            console.log(response)
            actions.logIn() // there you go
            this.setState({
                feedback: "Alright, welcome back! I'm gonna log you in!"
            })
        }
    )
    // ...
}
...