在onClick方法中反应setState不更新DOM

问题描述：

我正在使用react开发一个简单的游戏斗争动画。要开始战斗，我有一个按钮onClick事件：onClick={this.fight.bind(this)}。现在，我想在这样的事随时变化更新一些状态变量：在onClick方法中反应setState不更新DOM

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> 
    ); 
    } 
}

我的期望是看到进度条beeing更新每隔1秒。但它只更新一次。当战斗功能完成beein执行。

你试图返回打架功能？刚刚更新的 –

是一个错误。只是想要执行该功能并更新状态 – danyhiol

答

指ReactJs official documents，你不必在渲染功能再次与这一点，因为你已经做了在构造函数的结合

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

应该

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

它不是绑定的问题，因为其他人可以更新状态，但它只发生一次 –

@ShubhamKhatri。你说对了。我也试过这个结果。我花了4天的时间试图找出问题所在。我的结论是：我可能会缺少一些反应基础（导致我做这篇文章）或者反应状态有问题。 – danyhiol

@danyhiol我想这是因为while循环内部的超时，你循环得到执行而不用等待超时改变状态，我会说利用setInterval来执行这个动作而不是while循环并且清除间隔的时候lifeA

答

我终于通过完全重写while循环来完成这个工作，使用setInterval来处理bool条件：((npcPlayerLife > 0) && (advPlayerLife > 0))，然后在条件不再满足时停止。我有这个帮助某人。

在onClick方法中反应setState不更新DOM

相关推荐