因此,我要实现以下目标:确认用户电子邮件地址和密码正确后,登录状态必须从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”事件集。
答案 0 :(得分: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!"
})
}
)
// ...
}
答案 1 :(得分:1)
可以使用context
and contextType
解决此问题,尽管可以将其视为快速而又肮脏的解决方案;最初引入它们是为了更新依赖旧context
的旧代码。这种方法的问题在于,组件一次只能被限制在单个上下文中。
解决方案是使用类似于Redux connect
的HOC将组件连接到上下文:
withUserConsumer = Comp => props => (
<UserConsumer>
{user => <Comp user={user} ...props />}
</UserConsumer>;
);
const LoginWithUser = withUserConsumer(Login);
然后LoginWithUser
获得user
对象作为道具,可以在requestAuth
之类的组件方法中使用。