Reactjs: setState weist dem Status keinen Wert zu

Question

Ich brauche Hilfe, und Sie sind die einzigen, die mir das geben: D Ich lerne reactjs, versuche ein einfaches Kampfspiel zu entwickeln.

Ich versuche, einen Zustand (auf der Linie unten) zu aktualisieren, dessen Zug zu definieren, einen Treffer zu geben ist:

this.setState ({whoseRound: rand}, console.log ('test:' + this.state.whoseRound))

und es wird mein Status nicht aktualisiert. Mein staatlicher Wert ist immer noch 0. Ich kann nicht verstehen warum, wenn mich jemand retten könnte!

danke an alle.

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

Der zweite Parameter in setState() ist ein Rückruf. Mit anderen Worten, es braucht eine Funktion. Sie müssen also den Code, den Sie ausführen möchten, in eine Funktion einfügen.

So:

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

Oder mit einem Pfeil Funktion, wenn Sie es vorziehen:

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