2017-01-31 23 views
-2

反応し、私は次のようにページを反応させてきたし、カウンタを使用している場合キャッチされない例外TypeError:プロパティを読み取ることができません「SETSTATE」ヌルのは

Uncaught TypeError: Cannot read property 'setState' of null 

を取得しています。 私がちょうど古いスタイルの関数にincrementを変更し、それが動作しませんでした

<!DOCTYPE html> 
<html> 

<head> 
    <title>counter</title> 
    <script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
    <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/4.0.0-beta.3/react-router.min.js"></script> 

<head> 


<body> 


    <div id="entry"></div> 

    <script type="text/babel"> 
     var destination = document.querySelector("#entry"); 



class Counter extends React.Component { 
    constructor() { 
     super(); 
     this.state = { value: 0}; 
    } 

    increment(){ 
    this.setState(function(prevState){ 
     value: prevState.value + 1 
    }); 
    }; 

    decrement(){ 
    this.setState(prevState => ({ 
     value: prevState.value - 1 
    })); 
    }; 

    render() { 
    return (
     <div> 
     {this.state.value} 
     <button onClick={this.increment}>+</button> 
     <button onClick={this.decrement}>-</button> 
     </div> 
    ) 
    } 
} 

ReactDOM.render(
    <div> 
     <Counter/> 
    </div>, 
    destination 
) 

     </script> 
    </body> 

</html> 

SETSTATE

で使用 thisとしなければならないようです。

+1

がhttp://blog.andrewray.me/を読ん推奨すっきりと思われます反応-es6-autobinding-and-createclass/ –

+0

「[nullのReact.js、Modal、Bootstrap]のプロパティ 'setState'を読み取ることができません](http://stackoverflow.com/questions/40694468/cannot-read-property -setstate-of-null-react-js-modal-bootstrap) – Pineda

答えて

1

ES6の書き込みモードでは、カスタム関数にコンテキストを渡す必要があります。

これを行うにはさまざまな方法がありますが、ここにはsitepoint articleという良い出発点があります。スタートとして

、としてあなたのコンストラクタを変更する - あなたは、同様onClickで同じことを行うことができます

constructor() { 
     super(); 
     this.state = { value: 0}; 
     this.increment = this.increment.bind(this); 
     this.decrement = this.decrement.bind(this); 

    } 

が、私見これは

関連する問題