Reactjs：setStateは状態に値を割り当てません

Question

私は助けが必要です。あなたは私にその唯一のものです：D 私はreactjsを学んで、簡単な戦いのゲームを開発しようとしています。

this.setState（{whoseRound：ランド}にconsole.log（

Iは、そのターンそれがヒットを与えるために定義する（下の行に）一つの状態を更新しようと 'テスト' + this.state.whoseRound））

私の状態は更新されません。私の状態価値はまだ0です。なぜ誰かが私を救うことができたら、私は理解できません！

ありがとうございます。

class App extends Component { 
 

 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     characters: [], //contains Array of characters objects 
 
     readyToFight: false, // character selected or not 
 
     firstPlayerCharacter: null, //contains key of character on select 
 
     secndPlayerCharacter: null, //contains key of character on select 
 
     whoseRound: 0 // defines whose character attacks 
 
    } 
 
    } 
 

 
    //Run the fight 
 
    setFight =() => { 
 
    let firstFighter = this.state.characters[this.state.firstPlayerCharacter] 
 
    let secndFighter = this.state.characters[this.state.secndPlayerCharacter] 
 

 
    this.initiateFight(firstFighter, secndFighter); 
 
    } 
 

 
    //initiate fight rounds 
 
    initiateFight = (firstFighter, secndFighter) => { 
 

 
    // set who attacks first randomly => returns 1 or 2 
 
    var rand = randomDice(1, 2) 
 

 
    // !!!!! HERE: My console.log always display 0 
 
    this.setState({whoseRound: rand}, console.log('test:' + this.state.whoseRound)) 
 

 
    while(firstFighter.stats.health > 0 || secndFighter.stats.healthh > 0){ 
 
     // depending on whoseRound is, we set an attacker and a defenser 
 
     1 === this.state.whoseRound ? this.runRound(firstFighter, secndFighter) : this.runRound(secndFighter, firstFighter) 
 
    } 
 
    } 
 

 
    // Lance les actions définies pour un round 
 
    runRound = (attacker, defender) => { 
 
    let hit = false 
 
    let cc = false 
 
    let damages 
 

 
    hit = randomDice(0, 100) <= this.getHitChances(attacker, defender) 
 
    cc = randomDice(0, 100) <= this.getCriticalChances(attacker, defender) 
 
    damages = this.getDamages(attacker, defender, cc) 
 

 
    if(hit) 
 
    { 
 
     //console.log(attacker.name + ' attaque ' + defender.name + ' et lui occtroie ' + damages + ' points de dégats') 
 
     //console.log('les points de vie de ' + defender.name + ' passent de ' + defender.stats.health + ' à ' + (defender.stats.health - damages)) 
 
     defender.stats.health -= damages 
 
    } 
 

 
    //Now, it's the other character's turn 
 
    1 === this.state.whoseRound ? this.setState({whoseRound: 2}) : this.setState({whoseRound: 1}) 
 

 
    } 
 
    
 
} 
 

 
export default App;

Answer 1

setState()の2番目のパラメータは、コールバックです。言い換えれば、それは機能をとる。したがって、実行するコードを関数にラップする必要があります。このよう

：

// !!!!! HERE: My console.log always display 0 
this.setState({whoseRound: rand}, function() {console.log('test:' + this.state.whoseRound)}) 

または矢印機能とは、あなたが好む場合：

// !!!!! HERE: My console.log always display 0 
this.setState({whoseRound: rand},() => {console.log('test:' + this.state.whoseRound)})