Axios响应后如何更新我的React上下文

Question

简要说明

因此，我要实现以下目标：确认用户电子邮件地址和密码正确后，登录状态必须从false更新为true。但是，该登录状态是在我的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>
    )
}

问题

但是，在登录请求成功后，我不明白如何在App.js中更新我的“ actions.Login”事件集。

Answer 1

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!"
            })
        }
    )
    // ...
}

Answer 2

可以使用context and contextType解决此问题，尽管可以将其视为快速而又肮脏的解决方案；最初引入它们是为了更新依赖旧context的旧代码。这种方法的问题在于，组件一次只能被限制在单个上下文中。

解决方案是使用类似于Redux connect的HOC将组件连接到上下文：

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

const LoginWithUser = withUserConsumer(Login);

然后LoginWithUser获得user对象作为道具，可以在requestAuth之类的组件方法中使用。