React-无法读取未定义的属性“setState”

Posted

技术标签:

【中文标题】React-无法读取未定义的属性“setState”【英文标题】:React- Cannot read property 'setState' of undefined 【发布时间】:2016-03-03 12:03:50 【问题描述】:

由于某种原因,我收到错误“React-无法读取未定义的属性 'setState'”。所以 this.state 永远不会用用户输入的值进行更新。当我尝试被注释掉的绑定时,我得到了奇怪的行为,我无法为用户名输入输入,并且我不再收到 null 错误,但值只是未定义。任何帮助,将不胜感激。谢谢。

import __fetch from "isomorphic-fetch";
import React from "react";
import InlineCss from "react-inline-css";
import Transmit from "react-transmit";

import Header from './components/header'

class Registration extends React.Component 

    componentWillMount () 
        if (__SERVER__) 
            console.log("Hello server from Registration");
        

        if (__CLIENT__) 
            console.log("Hello Registration screen");
        
    

    constructor () 
        super()

        this.state = 
            name: '',
            password: ''
        

         //this.onChangeName = this.onChangeName.bind(this);
         //this.onChangePassword = this.onChangePassword.bind(this);
    

    onChangeName(e) 
        //this.state.name = e.target.name
        this.setState( name: e.target.name);
    

    onChangePassword(e) 
        //this.state.password = e.target.name
        this.setState( password: e.target.password );
    


    emptinessChecker()
        let name, password = this.state
        console.log(name)
        if (name === "" || password === "") 
            return true;
        
        else 
            return false;
        
    

    submit() 
        console.log(this)
        console.log(this.state)
        if (this.emptinessChecker())
            alert("Please do not leave any fields blank!");
        
        else
            var xhr = new XMLHttpRequest();   // new HttpRequest instance 
            xhr.open("POST", "/edit");
            xhr.addEventListener("load", e => 
                console.log(xhr.responseText)
            );

            xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
            xhr.send(JSON.stringify(this.state));
            window.location.href= "/success"
        
    


    render () 

        //let username, password = this.state

        if (__SERVER__) 
            console.log("render server from registration");
        
        if (__CLIENT__) 
            console.log('we client now!')
        

        return (
            <InlineCss stylesheet=Registration.css() namespace="Registration">
                <Header />



                <div>
                    <div className = "Register" >
                        Register
                    </div>


                    <ul className="account-fields">

                        <div className = 'Name'>
                                <label>Username</label>
                                <input type="text" value=this.state.name onChange=this.onChangeName />
                        </div>

                        <div className = 'Password'>
                                <label>Password</label>
                                <input type="password" value=this.state.password onChange=this.onChangePassword />
                        </div>


                        <div className='submitForm'>
                            <div className='submit' onClick=e=>this.submit()>Submit</div>
                        </div>

                    </ul>
                </div>

            </InlineCss>




        );
    
    /**
     * <InlineCss> component allows you to write a CSS stylesheet for your component. Target
     * your component with `&` and its children with `& selectors`. Be specific.
     */
    static css () 
        return (`
            & .Register 
                position: fixed;
                right: 550px;
                bottom: 550px;
                font-size: 50px;
            
            & .account-fields 
                position: fixed;
                right: 550px;
                bottom: 450px;
                font-size: 20px;
            
            & .submitForm 
                position: fixed;
                right: 10px;
                bottom: 10px;
                width: 200px;
            
            & .submit 
                cursor: pointer;
                text-align: center;
                font-size: 20px;
                padding: 10px;
                background-color: #00E4A5;
                color: #fff;
                border-radius: 5px;
                box-shadow: 0 2px 10px 0 rgba(0,0,0,.13);
                border-bottom: 2px solid #00C791;
                text-shadow: 0px -1px 0px #009E73;
            
        `);
    



export default Transmit.createContainer(Registration);

【问题讨论】:

如果这些方法已经作为类定义的一部分存在,为什么还要在构造函数中设置它们? ***.com/questions/32317154/… 【参考方案1】:

编辑

如果您要遵循构造函数中的绑定模式,请确保使用正确的构造函数调用:

constructor (props) 
    super(props)

在构造函数中注意props

原答案

由于您使用的是 ES6 组件定义,因此您应该在渲染的组件中绑定到 this

<input type="text" value=this.state.name onChange=this.onChangeName.bind(this) />

你不需要在构造函数中定义这些东西:

 //this doesn't work
 //this.onChangeName = this.onChangeName.bind(this);
 //this.onChangePassword = this.onChangePassword.bind(this);

似乎您在示例中遗漏了一些代码,所以我不确定您是否为了示例而尝试删除不必要的部分,但请确保您的组件是结构合理。

【讨论】:

即使这样做也会导致更新时出现未定义的状态。【参考方案2】:

在这些事件处理程序中,e.target 是触发事件的&lt;input&gt;

onChangeName(e) 
    //this.state.name = e.target.name
    this.setState( name: e.target.name);


onChangePassword(e) 
    //this.state.password = e.target.name
    this.setState( password: e.target.password );

您可以使用其value 属性获取输入的值:

onChangeName(e) 
    this.setState(name: e.target.value);


onChangePassword(e) 
    this.setState(password: e.target.value);

您还需要确保this 被正确绑定,按照构造函数中注释掉的代码。


如果您为您的输入提供合适的 name 道具,则将它们替换为单个 onChange 处理程序:

constructor(props) 
  super(props)
  // ...
  this.onChange = this.onChange.bind(this)


onChange(e) 
  this.setState([e.target.name]: e.target.value)


render() 
  // ...
  <input type="text" name="name" value=this.state.name onChange=this.onChange/>
  <input type="password" name="password" value=this.state.password onChange=this.onChange/>
  // ...

【讨论】:

那么,如果我有 5 种不同的方法,我必须像这样将它们全部添加到构造函数中吗?不,谢谢。回到 Angular 和 Vue【参考方案3】:

如果你使用箭头函数,那么你就不需要绑定了。

onNameChange = (e)=> 
this.setState(name:e.target.value);


onPasswordChange = (e) => 
this.setState(password:e.target.value);

【讨论】:

以上是关于React-无法读取未定义的属性“setState”的主要内容,如果未能解决你的问题,请参考以下文章

反应:TypeError:无法读取未定义的属性“setState”

ReactJs:获取无法读取未定义错误的属性“setState”[重复]

ReactJS TypeError:无法读取未定义的属性“setState”[重复]

TypeError:无法读取未定义的属性“setState”

Axios ReactJS - 无法读取未定义的属性“setState”

未处理的拒绝(TypeError):无法读取反应中未定义的属性“setState”(firestore)