未定义类型错误：无法读取未定义的属性“状态”或“道具”

Question

未定义类型错误：无法读取未定义的属性“状态”或“道具”

因此，我开始将我的应用程序从ES 2015转换为ES6，它使用了Reaction。

我有一个家长班和一个孩子班，

export default class Parent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            code: ''
        };
    }

    setCodeChange(newCode) {
        this.setState({code: newCode});
    }


    login() {
        if (this.state.code == "") {
            // Some functionality
        }
    }

    render() {
        return (
            <div>
                <Child onCodeChange={this.setCodeChange} onLogin={this.login} />
            </div>
        );
    }}

儿童班，

export default class Child extends Component {
    constructor(props) {
        super(props);
    }

    handleCodeChange(e) {
        this.props.onCodeChange(e.target.value);
    }

    login() {
        this.props.onLogin();
    }

    render() {
        return (
            <div>
                <input name="code" onChange={this.handleCodeChange.bind(this)}/>
            </div>
            <button id="login" onClick={this.login.bind(this)}>
        );
    }}Child.propTypes = {
    onCodeChange: React.PropTypes.func,
    onLogin: React.PropTypes.func};

但是，这会导致以下错误，

状态未定义

它指的是，

if (this.state.code == "") {
    // Some functionality}

知道是什么导致的吗？

Answer 1

可以使用箭头函数绑定函数。您需要在子组件和父组件中绑定您的函数。家长：export&nbsp;default&nbsp;class&nbsp;Parent&nbsp;extends&nbsp;Component&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;constructor(props)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;super(props); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.state&nbsp;=&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;code:&nbsp;'' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;setCodeChange&nbsp;=&nbsp;(newCode)&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.setState({code:&nbsp;newCode}); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;login&nbsp;=&nbsp;()&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(this.state.code&nbsp;==&nbsp;"")&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Some&nbsp;functionality &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;render()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Child&nbsp;onCodeChange={this.setCodeChange}&nbsp;onLogin={this.login}&nbsp;/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;}}儿童export&nbsp;default&nbsp;class&nbsp;Child&nbsp;extends&nbsp;Component&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;constructor(props)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;super(props); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;handleCodeChange&nbsp;=&nbsp;(e)&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.props.onCodeChange(e.target.value); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;login&nbsp;=&nbsp;()&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.props.onLogin(); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;render()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;name="code"&nbsp;onChange={this.handleCodeChange}/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button&nbsp;id="login"&nbsp;onClick={this.login}> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;}}Child.propTypes&nbsp;=&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;onCodeChange:&nbsp;React.PropTypes.func, &nbsp;&nbsp;&nbsp;&nbsp;onLogin:&nbsp;React.PropTypes.func};还有其他绑定函数的方法，例如您正在使用的方法，但是您也需要对父组件这样做。<Child onCodeChange={this.setCodeChange.bind(this)} onLogin={this.login.bind(this)} />也可以将构造函数中的绑定指定为家长：constructor(props)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;super(props); &nbsp;&nbsp;&nbsp;&nbsp;this.state&nbsp;=&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;code:&nbsp;'' &nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;this.setCodeChange&nbsp;=&nbsp;this.setCodeChange.bind(this); &nbsp;this.login&nbsp;=&nbsp;this.login.bind(this);}儿童constructor(props)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;super(props); &nbsp;&nbsp;&nbsp;&nbsp;this.handleCodeChange&nbsp;=&nbsp;this.handleCodeChange.bind(this); &nbsp;&nbsp;&nbsp;&nbsp;this.login&nbsp;=&nbsp;this.login.bind(this);}

Answer 2

我同意@Shubham Kathri给出的所有不同的解决方案，但渲染中的直接约束力除外。不建议在呈现中直接绑定您的函数。建议您始终在构造函数中绑定它，因为如果直接在呈现中绑定，那么每当组件呈现Webpack时，就会在捆绑文件中创建一个新的函数/对象，这样Webpack包的文件大小就会增加。由于许多原因，组件重新呈现例如：执行setState，但是如果将它放置在构造函数中，则只调用一次。不建议执行以下内容<Child&nbsp;onCodeChange={this.setCodeChange.bind(this)}&nbsp;onLogin={this.login.bind(this)}&nbsp;/>始终在构造函数中执行此操作，并在需要的地方使用ref。constructor(props){ &nbsp;&nbsp;super(props); &nbsp;&nbsp;this.login&nbsp;=&nbsp;this.login.bind(this); &nbsp;&nbsp;this.setCodeChange&nbsp;=&nbsp;this.setCodeChange.bind(this);}<Child&nbsp;onCodeChange={this.setCodeChange}&nbsp;onLogin={this.login}&nbsp;/>如果您正在使用ES6，则不需要手动绑定，但如果需要，则可以。如果希望避开与范围相关的问题和手动函数/对象绑定，可以使用箭头函数。对不起，如果我的手机上有任何输入错误