react error TypeError: 未定義のプロパティ 'setState' を読み取ることができません。

コードは次のようになります。

class test extends Component {
    constructor(props) {
        super(props);
        this.state = {
            liked: false
        };
    }
    handleClick(event) {
        this.setState({liked: !this.state.liked});
    }
    render() {
        var text = this.state.liked ? 'liked' : 'disliked';
        return (
            <div onClick={this.handleClick}>
                You<b>{text}</b>me. Tap me to switch states.
            </div>
        );
    }

}
export default test;

正常にページが表示できるようになります。

しかし、ボタンが押されるとエラーが報告されます。

なぜこのようなことが起こるのでしょうか？

なぜなら、ボタンをクリックしたとき、handleClick()メソッドでthisに到達する頃には、もうコンポーネント内ではthisではなくなっているからです。

最初の解決策は、これを手動でバインドすることです。

constructor(props) {
    super(props);
    this.state = {
        liked: false
    };
}

に変更する。

constructor(props) {
    super(props);
    this.state = {
        liked: false
    };
    this.handleClick = this.handleClick.bind(this);//manual binding
}

handleClick(event) {
        this.setState({liked: !this.state.liked});
}

handleClick= (e) => {
        this.setState({liked: !this.state.liked});
}

この解決策で問題が解決したことで、別の疑問が生まれました。関数がReactコンポーネントのメソッドである場合、矢印関数と通常の関数の違いは何でしょうか？

例えば、以下の2つのaの定義はどう違うのでしょうか？

class App extends Component {
  a() {
    console.log(1)
  }

  a = () => {
    console.log(1)
  }
}

App.prototype.a = function() {}

class App extends Component {
  constructor (.. .args) {
    super(... .args)
    this.a = () => {
        console.log(1)
    }
  }
}

<button onClick={this.handleClick.bind(this)}></button>

<button onClick={(e) => this.handleClick(e)}></button>

class A {
  constructor() {
    this.a = this.a.bind(this)
  }

  a() {}

  // or
  @bindthis
  b() {}
}

そして arrow関数は、それ以外にもコードが少なくなっています。通常の関数との最大の違いは、関数が宣言された時点でこのスコープが定義されていることで、一般的には関数が宣言された時点で暗黙のうちにthisとして定義されています。

var a = ()=>{
    console.log(this)
}
// equivalent to
var a = function(){
    console.log(this)
}.bind(this);

a(); //Window
var b = function(){
    console.log(this)
};
b(); //Window
var obj = { a,b };
obj.a(); //Window
obj.b(); //obj