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

IT技术 reactjs ecmascript-6 es6-class
2021-04-10 23:30:05

所以我开始将我的应用程序从 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>
        );
    }
}

儿童班，

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

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

this.state 未定义

它指的是，

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

知道是什么原因造成的吗？

2个回答

你可以使用箭头函数来绑定你的函数。您需要在子组件和父组件中绑定您的函数。

家长：

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

还有其他方法可以绑定函数，例如您正在使用的方法，但您也需要为父组件执行此操作 <Child onCodeChange={this.setCodeChange.bind(this)} onLogin={this.login.bind(this)} />

或者您可以在构造函数中指定绑定为

家长： 

constructor(props) {
    super(props);
    this.state = {
        code: ''
    };
 this.setCodeChange = this.setCodeChange.bind(this);
 this.login = this.login.bind(this);
}

孩子

constructor(props) {
    super(props);
    this.handleCodeChange = this.handleCodeChange.bind(this);
    this.login = this.login.bind(this);
}
@ivarni 我之前没看到你评论。我阅读了问题并回答了。
2021-05-25 23:30:05
它没有任何问题，但效率低下，因为您将在每次渲染时创建新的函数对象
2021-06-03 23:30:05
@ivarni 是的，您可能认为这是重复的，但我在父母和孩子上都尝试过的绑定不起作用。这就是为什么我提出来看看是否有更好的方法。正如我认为的那样，箭头函数是一种享受。
2021-06-16 23:30:05
我已经评论了一个解释绑定功能的骗子的链接，为什么要添加另一个基本上说完全相同的答案？
2021-06-18 23:30:05
@ShubhamKhatri 如果我使用绑定方法，在渲染函数中调用绑定有什么问题吗？
2021-06-19 23:30:05

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

不建议您直接在渲染中绑定您的函数。建议您始终在构造函数中绑定它，因为如果您直接在渲染中进行绑定，那么无论何时您的组件渲染 Webpack 都会在捆绑文件中创建一个新的函数/对象，因此 Webpack 捆绑文件的大小会增加。出于多种原因，您的组件会重新渲染，例如：执行 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} />

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

对不起，如果我在手机上回答有任何错别字

其它你可能感兴趣的问题
上一篇如何在 react-router v4 中使用 history.push/Link/Redirect 传递参数？ 下一篇未捕获的错误：不变违规：元素类型无效：预期是字符串（对于内置组件）或类/函数，但得到：对象