Question

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

这是我的提供商代码：

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

我如何在渲染功能之外使用上下文？

Answer 1

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


const tds = document.querySelectorAll('table.DataGridStyle tr.Contents > td')

// The, per every td you would use the property `innerText`
// to get only the text with no HTML at all. For instance:
console.log(tds[5].innerText)
// "۱۳۴,۱۰۰"

由于您提供给<UserContext.Consumer> {({ context }) => {}} </UserContext.Consumer>的{{1}}包含value和UserContext.Provider，因此您可能想将它们拉出而不是state：

saveUser

第二，如果您在共享context方法的同一组件上定义了{({ state, saveUser }) => {}}，则希望将组件包装在onClickLogin中，以便整个组件都可以访问render和<UserContext.Consumer>作为道具。像这样：

state

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

1 个答案: