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

【问题标题】：How do I update my React context after Axios responseAxios 响应后如何更新我的 React 上下文
【发布时间】：2019-01-13 14:54:14
【问题描述】：

简要说明

所以我想要实现的是：在确认用户电子邮件地址和密码正确后，登录状态必须从 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”事件集。

【问题讨论】：

不清楚您在更新登录时遇到了什么问题。并且未显示可能对此负责的 setLoginstate。
我更新了我的 Login.js 代码。我用 onlick 设置了一个 div 示例。我遇到的问题是： onclick 启动 requestauth 箭头功能。现在我想知道，在 axios 返回成功的响应后，我如何启动我的 actions.LogIn 事件（在 app.js 中的 userprovider 中定义的事件）。

标签： reactjs api axios consumer

【解决方案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!"
            })
        }
    )
    // ...
}

【讨论】：

谢谢！那是为我做的

【解决方案2】：

这个问题可以通过context and contextType 解决，尽管它可以被认为是一个快速而肮脏的修复；引入它们主要是为了更新依赖于旧 context 的遗留代码。这种方法的问题在于，一个组件一次仅限于单个上下文。

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

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

const LoginWithUser = withUserConsumer(Login);

然后LoginWithUser得到user对象作为prop，可以在requestAuth等组件方法中使用。

【讨论】：

这当然也是一个很好的解决方案！但是，在这种情况下，我遵循了@xehpuk 的答案，在那里我可以轻松地将我的操作传递给我的 loginAuth。