时间戳

首页 > 解决方案 > 登录后如何在上下文中保存用户

reactjs - 登录后如何在上下文中保存用户

问题描述

我正在尝试使用上下文提供程序文件中的函数，以便将当前用户信息保存在上下文中并在组件之间传递

这是我的提供者代码：

class UIContext extends Component {

   state = {
       userId: "",
       userName: ""
   }

   saveUser = (id, name) => {
       this.setState({
           userId: id,
           userName: name
       })
}

   render(){
       return(
           <UserContext.Provider value={{
               state: this.state,
               saveUser: this.saveUser
           }}>
               {this.props.children}
           </UserContext.Provider>
       )
   }
}

这是我的登录页面渲染功能代码：

 render() {
        return (
            <UserContext.Consumer>
            {({context}) => (
                <>

       <input className="main_input" onChange={this.onChangeHandlerTz} id="tz" placeholder='ID'/>
                    <input className="main_input" type="password" onChange={this.onChangeHandlerPass} id="pass" placeholder='Password'/>

                    <button className="main_btn" id="save" onClick={this.onClickLogin}>login</button>
                    <button className="main_btn" id="save" onClick={this.onClickRegister}>register</button>

            </>)}
            </UserContext.Consumer>
)}

我想在这里使用 this.context.saveUser ：

onClickLogin = (e) => {
        e.preventDefault();
        if (this.validate(this.state.id)) {
            fetch('/api/v1/login',
                {
                    method: 'POST',
                    body: JSON.stringify({
                        id: this.state.id,
                        password: this.state.pass
                    }),
                    headers: {
                        "Content-type": "application/json; charset=UTF-8"
                    }
                }).then(res => res.json())
                .then(data => {
                    if (data.status === 0) {
                  this.context.saveUser(this.state.id, this.state.fullName)
                    } else {
                        this.setState({loginError: true})
                    }
                }).catch(error => {
                // this.setState({loading: false})
                this.setState({error: error})
                console.log(error)
            })
        } else {
            this.setState({idError:true})
        }
    };

这是我得到的错误：

TypeError: _this.context.saveUser is not a function

如何在渲染函数之外使用上下文？

标签： reactjs

解决方案

首先，我认为您可能在这里解构了错误的论点：

<UserContext.Consumer>
  {({ context }) => {}}
</UserContext.Consumer>

由于value您提供给UserContext.Provider包含的stateand saveUser，您可能希望将它们拉出而不是context：

{({ state, saveUser }) => {}}

其次，如果您onClickLogin在共享方法的同一组件上定义render，您希望将组件包装在 中，<UserContext.Consumer>以便整个组件可以访问state并saveUser作为道具。像这样的东西：

class LoginPage extends React.Component {
  onClickLogin = () => {
    console.log(this.props.user.state)
    console.log(typeof this.props.user.saveUser)
  }
  render() {
    <button onClick={this.onClickLogin}>Login</button>
  }
}

export default props => 
  <UserContext.Consumer>
    {user => <LoginPage user={user} {...props} />}
  </UserContext.Consumer>

推荐阅读