невозможно отобразить переменную состояния внутри <h1>

Question

export default class player extends React.Component {
constructor(...args) {
super(...args);
this.state = {
  shoot: 0
};
}

shoot - это переменная, которую я пытаюсь изменить в функции стрелка, и отображается позже в <h1>.

shooter() {
this.setState({ shoot: Math.floor(Math.random() * Math.floor(3)) });
console.log("hello");
}

render() {
return (
  <div>
    <h1>{this.state.shoot}</h1>
    <button onClick={() => this.shooter}>shoot it</button>
  </div>
);
}
} 

<h1> не меняется при изменении состояния, не изменится ли состояние при срабатывании shooter()? и не обновляет ли <h1>.

любая помощь высоко ценится. : -)

Answer 1

Свяжите ваш метод класса shooter в вашем конструкторе, чтобы использовать его следующим образом onClick={this.shooter}.

Вы можете найти дальнейшее объяснение здесь .

 export default class player extends React.Component {
      constructor(...args) {
        super(...args);
        this.state = {
          shoot: 0
        };
        this.shooter = this.shooter.bind(this);
      }

      render() {
        return (
            <div>
                <h1>{this.state.shoot}</h1>
                <button onClick={this.shooter}>shoot it</button>
            </div>
        );
      }
    }

Answer 2

Изменить строку

<button onClick={() => this.shooter}>shoot it</button>

Для

<button onClick={() => this.shooter()}>shoot it</button>