Question

我一直收到这个错误，而且我不知道为什么，因为我所尝试的一切都不起作用。有谁知道为什么这不起作用以及它如何起作用？

我在这里定义了这个：

this.setState({isAuthenticated: true})

这是我的代码：

class Login extends Component{

        constructor(props){
            super(props);

            this.state ={
                email: '',
                password: '',
                isAuthenticated: false
            };

            function login(username, email){
                sessionStorage.setItem('loginSessionUsername', username);
                sessionStorage.setItem('loginSessionEmail', email);
                this.setState({isAuthenticated: true})
            }
        }

        render(){
            const isAuthenticated = this.state.isAuthenticated;
            if(isAuthenticated){
                return(
                    <div>
                        <Servicedesk />     
                    </div>
                )
            }
            return(
                <div id='Login' className='setVisible'>
                    <div>
                        <label>Emailadres</label>
                        <input type='text' placeholder='je email' onChange={ev => this.setState({email: ev.target.value})}/>
                        <label>Wachtwoord</label>
                        <input type='password' placeholder='je wachtwoord' onChange={ev => this.setState({password: ev.target.value})}/>
                        <br />
                        <button onClick={(event => this.handleClick(event))}>Submit</button>
                    </div>
                </div>
            )
        }
    }

    export default Login;

Answer 1

您应该使用箭头函数(see the docs)，它将上下文绑定到您的函数，如下所示：

{{1}}

Answer 2

将您的登录功能移到构造函数之外。

class Login extends Component{

    constructor(props){
        super(props);

        this.state ={
            email: '',
            password: '',
            isAuthenticated: false
        };
    }

        handleClick = () => {
            sessionStorage.setItem('loginSessionUsername', this.state.username);
            sessionStorage.setItem('loginSessionEmail', this.state.email);
            this.setState({isAuthenticated: true})
        }


    render(){
        const isAuthenticated = this.state.isAuthenticated;
        if(isAuthenticated){
            return(
                <div>
                    <Servicedesk />     
                </div>
            )
        }
        return(
            <div id='Login' className='setVisible'>
                <div>
                    <label>Emailadres</label>
                    <input type='text' placeholder='je email' onChange={ev => this.setState({email: ev.target.value})}/>
                    <label>Wachtwoord</label>
                    <input type='password' placeholder='je wachtwoord' onChange={ev => this.setState({password: ev.target.value})}/>
                    <br />
                    <button onClick={(event => this.handleClick())}>Submit</button>
                </div>
            </div>
        )
    }
}

export default Login;

Answer 3

将构造函数中的登录函数修改为此。

this.handleClick = () => {
    sessionStorage.setItem('loginSessionUsername', this.state.username);
    sessionStorage.setItem('loginSessionEmail', this.state.email);
    this.setState({isAuthenticated: true});
}

然后将按钮jsx修改为此

<button onClick={this.handleClick}>Submit</button>

TypeError：undefined不是对象（评估＆＃39; this.setState＆＃39;）

3 个答案: