React.JS无法读取null错误的属性'props'

时间:2016-04-04 15:13:57

标签: javascript reactjs

刚开始使用react.js。

我一直有同样的错误。不知道为什么?
错误是:Uncaught TypeError: Cannot read property 'props' of null
我知道单击按钮时会发生错误。特别是我认为它在update()方法中。

JS代码:

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component{
    constructor(){
        super();
        this.state = {increasing:false}
        this.do_update = this.update.bind(this);
    }
    update(){
        ReactDOM.render(
            <App val={this.props.val+1} />,
            document.getElementById('app')
        );
    }
    componentWillReceiveProps(nextProps){
        this.setState({increasing: (nextProps.val > this.props.val) })
    }
    render(){
        return <button onClick={this.update}>{this.props.val}</button>
    }
}

App.defaultProps = {val:0}
ReactDOM.render(<App />,document.getElementById('app'))

3 个答案:

答案 0 :(得分:3)

在这种情况下,您需要转到onClick do_update而不是update

return <button onClick={ this.do_update }>{ this.props.val }</button>

或将名称从do_update更改为update

this.update = this.update.bind(this);

答案 1 :(得分:0)

更新处理程序在被调用时,将无法获得&#39;这个&#39;的正确上下文。关键字...这就是为什么你的代码可能是:

this.do_update = this.update.bind(this);

线。

如果您将渲染方法更改为以下内容,则应该有效:

render(){
        return <button onClick={this.do_update}>{this.props.val}</button>
    }

答案 2 :(得分:-3)

将此行this.state = {increasing:false}更改为this.state = {increasing: false}

结肠后的那个空间很重要。