在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執行。

來源

2017-08-08 danyhiol

你試圖返回打架功能？剛剛更新的 –

是一個錯誤。只是想要執行該功能並更新狀態 – 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>

來源

2017-08-08 09:37:25

它不是綁定的問題，因爲其他人可以更新狀態，但它只發生一次 –

@ShubhamKhatri。你說對了。我也試過這個結果。我花了4天的時間試圖找出問題所在。我的結論是：我可能會缺少一些反應基礎（導致我做這篇文章）或者反應狀態有問題。 – danyhiol

@danyhiol我想這是因爲while循環內部的超時，你循環得到執行而不用等待超時改變狀態，我會說利用setInterval來執行這個動作而不是while循環並且清除間隔的時候lifeA <0 || lifeB <0. –

我終於通過完全重寫while循環來完成這個工作，使用setInterval來處理bool條件：((npcPlayerLife > 0) && (advPlayerLife > 0))，然後在條件不再滿足時停止。我有這個幫助某人。

來源

2017-08-30 21:10:20 danyhiol

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

回答

相關問題