TypeError：未定义不是对象（评估'this.setState'）[重复]

Posted 2023-02-21

【中文标题】TypeError：未定义不是对象（评估\'this.setState\'）[重复]

【英文标题】：TypeError: undefined is not an object (evaluating 'this.setState') [duplicate]TypeError：未定义不是对象（评估'this.setState'）[重复]

【发布时间】：2018-10-24 21:50:49

【问题描述】：

我不断收到此错误，我不知道为什么，因为我尝试过的所有方法都不起作用。有谁知道为什么这不起作用以及它是如何起作用的？

我在这里得到了这个未定义：

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;

【问题讨论】：

你能告诉哪一行是 this.state 是未定义的？

this.handleClick 没有在任何地方定义

this.setState(isAuthenticated: true)

这是因为你已经将 login 声明为一个函数，并且它在组件被挂载之前执行，这意味着还没有 setState。此外，您正在从按钮调用handleClick，当您单击按钮时它会引发错误。

可能不相关，但我认为您应该将login 定义为与render 相同级别的函数，而不是在ctor 内部

【参考方案1】：

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

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>

【讨论】：

this.handleClick 真的吗？你知道this 到底是什么吗？

在构造函数内部。不在外面

这会抛出错误。该方法需要在构造函数之外和类内部。

它可以工作 @HarishSoni codepen.io/sadarshannaiynar/pen/MGBLRy 这是一个代码笔做同样的事情

this 在构造函数内部有一个上下文，因此您可以利用它而不是在外部声明属性。

【参考方案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;

【讨论】：

并不总是需要移出构造函数

只是在给小费。只是一个试图提供帮助的开发者

【参考方案3】：

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

const login = ( username, email) => 
        sessionStorage.setItem('loginSessionUsername', username);
        sessionStorage.setItem('loginSessionEmail', email);
        this.setState(isAuthenticated: true)
    

【讨论】：

这对我有用！这是手动点击功能： this.handleClick = event => var email = this.state.email; var 密码 = this.state.password; SupportStaf.map(function (key) if(key.email === email) if(key.password === password) login(key.username, key.email); ); ;