javascript - onClick 方法中的 React setState 不更新 DOM

Question

我正在使用 React 开发一个简单的游戏战斗动画。为了开始战斗，我有一个带有 onClick 事件的按钮:onClick={this.fight.bind(this)}。现在我想在任何发生变化的时候更新一些状态变量，如下所示:

import React, { Component } from 'react';
import { ProgressBar, Row, Col } from 'react-bootstrap';
const playerA = {
    _id: 1,
    name: "playerA name",
    life: 100,
    speed: 50,
}
const playerB = {
    _id: 1,
    name: "playerB name",
    life: 100,
    speed: 40,
}

export default class App extends Compornent {

  constructor() {
    super();
      this.state={
        playerA : playerA ,
        playerB : playerB ,
        aLife: 100,
        bLife: 100,
    };
    this.fight = this.fight.bind(this);
  };

  fight(a,b){
    lifeA=this.state.playerA.live;
    lifeB=this.state.playerB.live;
    speedA=this.state.playerA.speed;
    speedB=this.state.playerB.speed;
    dmg = 10
    while (lifeA>0 && lifeB>0) {
      if (speedA > speedb) {
        lifeA = lifeA - dmg;
        setTimeout(() => {
          this.setState({ aLife: lifeA });
        }, 1000);
        speedB = speedB + 10;
      } else {
        lifeB = lifeB - dmg;
        setTimeout(() => {
          this.setState({ bLife: lifeA });
        }, 1000);
        speedA = speedA + 10;
      }
  }
  render() {
    return (
      <Row>
        <ProgressBar bsStyle="success" now={this.state.aLife} srOnly/>
        <ProgressBar bsStyle="success" now={this.state.bLife} srOnly/>
      </Row>
      <Row>
        <Button bsStyle="danger" bsSize="large" onClick={this.fight.bind(this)}>Start Fight</Button>
      </Row>
    );
  }   
}

我的期望是看到进度条每 1 秒更新一次。但它只更新一次。当战斗函数完成执行时。

Answer 1

引用ReactJs official documents ，您不必在渲染函数中再次绑定(bind) this，因为您已经在构造函数中完成了绑定(bind)

<Button bsStyle="danger" bsSize="large" onClick={this.fight.bind(this)}>Start Fight</Button>

应该是

 <Button bsStyle="danger" bsSize="large" onClick={this.fight}>Start Fight</Button>