Reactjs 未捕获类型错误：无法读取属性'；状态或道具'；未定义的

因此，我开始将我的应用程序从ES2015转换为使用React的ES6

我有一个父类和一个子类

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>
        );
    }
}

---

知道是什么原因导致了这种情况吗？

您可以使用arrow函数绑定函数。您需要绑定子组件和父组件中的函数

家长：

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}/>
            </div>
            <button id="login" onClick={this.login}>
        );
    }
}

Child.propTypes = {
    onCodeChange: React.PropTypes.func,
    onLogin: React.PropTypes.func
};

constructor(props) {
    super(props);
    this.handleCodeChange = this.handleCodeChange.bind(this);
    this.login = this.login.bind(this);
}

---

我同意@Shubham Kathri给出的所有不同解决方案，但渲染中的直接绑定除外

建议您不要在渲染中直接绑定函数。建议您始终在构造函数中绑定它，因为如果您在呈现中直接绑定，则无论何时组件呈现Webpack，都会在绑定文件中创建新函数/对象，因此Webpack绑定文件的大小会增加。由于许多原因，您的组件会重新呈现，例如：doing setState，但如果您将其放置在构造函数中，它只会被调用一次

不建议采用以下实施方式

<Child onCodeChange={this.setCodeChange.bind(this)} onLogin={this.login.bind(this)} />

始终在构造函数中执行此操作，并在需要时使用ref

constructor(props){
  super(props);
  this.login = this.login.bind(this);
  this.setCodeChange = this.setCodeChange.bind(this);
}

<Child onCodeChange={this.setCodeChange} onLogin={this.login} />

构造函数（道具）{
超级（道具）；
this.login=this.login.bind（this）；
this.setCodeChange=this.setCodeChange.bind（this）；
}

如果您使用的是ES6，则不需要手动绑定，但如果您愿意，可以。如果不想处理与范围相关的问题和手动函数/对象绑定，可以使用箭头函数

---

很抱歉，如果我的手机中有任何打字错误，我会回答。

可能重复您绑定孩子的

登录

函数，但不绑定家长的。有几种方法可以解决此问题，主要思想是将

此

绑定到回调函数。我对另一篇类似的帖子有一个答案，请参考我已经发表的评论，其中有一个链接指向一个解释绑定函数的dupe，为什么要添加另一个基本上说完全相同的答案？@ivarni我以前没有看到你的评论。我读了这个问题，然后回答了。@ivarni是的，你可能是对的，这是一个复制品，但我在父母和孩子身上试过的绑定都不起作用。因此，我提出，看看是否有更好的办法。正如我所认为的那样，箭头函数起到了作用。@shubhamkhattri如果我使用bind方法，在渲染函数中调用bind有什么问题吗？没有什么问题，但效率很低，因为每次渲染时都会创建新的函数对象

constructor(props) {
    super(props);
    this.handleCodeChange = this.handleCodeChange.bind(this);
    this.login = this.login.bind(this);
}

<Child onCodeChange={this.setCodeChange.bind(this)} onLogin={this.login.bind(this)} />

constructor(props){
  super(props);
  this.login = this.login.bind(this);
  this.setCodeChange = this.setCodeChange.bind(this);
}

<Child onCodeChange={this.setCodeChange} onLogin={this.login} />