初期状態に反応します。

Question

私は間違って何をしているのですか？TypeError：nullのプロパティ 'count'を読み取ることができません。初期状態を正しく設定していないのですか？

import React from 'react'; 
 

 
class User extends React.Component { 
 
\t super(props){ 
 

 
\t \t this.state = { 
 
\t \t \t count: 0 
 
\t \t } 
 
\t } 
 

 

 
\t increment(){ 
 
\t \t this.setState({ count: this.state.count + 1 }) 
 
\t } 
 

 
\t render(){ 
 
\t \t return(<div> 
 
\t \t \t <button 
 
\t \t \t \t onClick={this.increment}> 
 
\t \t \t \t \t \t {this.state.count} 
 
\t \t \t </button> 
 

 

 
\t \t </div>) 
 
\t } 
 
} 
 

 

 

 

 
export default User;

Answer 1

設定this.increment方法に、あなたはonClickにメソッド.incrementを渡すときには、Userコンポーネントに関連するコンテキストを失うので。 super(props)の代わりにconstructor(props)を使用する必要があります。

class User extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     count: 0 
 
    } 
 

 
    this.increment = this.increment.bind(this); 
 
    } 
 

 

 
    increment(){ 
 
    this.setState({ count: this.state.count + 1 }) 
 
    } 
 

 
    render() { 
 
    return (
 
     <div> 
 
     <button 
 
      onClick={this.increment} 
 
     > 
 
      { this.state.count } 
 
     </button> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<User />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>

また、あなたは、あなたがそう

onClick={() => this.increment() }