如何在 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 的 HOC 将组件连接到上下文 connect:

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

const LoginWithUser = withUserConsumer(Login);

然后LoginWithUser得到user对象作为prop，可以在requestAuth.

等组件方法中使用

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

How do I update my React context after Axios response

reactjs

api

axios

consumer

简要说明

代码

问题