(React.js)Why react cannot find the object?

Question

I am a newbie learning to build a rpg game with React.js, and I found this part very confusing.

I am trying to update life with onClick and when life<damage, the object player is dropped. So the html looks like this:

The current player is generated like this:

<h4>You are: {this.props.targets[this.props.playerindex].name}</h4>

I use these code to handle attack and update the index:

handleAttack(index1,id2){
    let players = this.state.players.slice();
    let index2 = players.findIndex(x => x.id === id2);
    let damage = players[index1].damage;
    let life = players[index2].life;
    console.log("Before(length):"+this.state.players.length);
    if (life>damage){
        players[index2].life = life-damage;}
    else {players=players.filter(player => player.id !== id2);}
    this.setState({players},()=>{console.log("After(length):"+this.state.players.length);
                                 this.handleUpdateIndex();});
}

handleUpdateIndex(){
    console.log("Before:"+this.state.playerindex);
    let index=this.state.playerindex;
    let length=this.state.players.length;
    console.log("BeforeUpdate(length)"+this.state.players.length);
    if(index<length-1)
    {this.setState({playerindex:index+1},() => {console.log("After:"+this.state.playerindex);});}
    else{this.setState({playerindex:0},() => {console.log("After:"+this.state.playerindex);});}
    this.forceUpdate();
}

But sometimes the index will increment while it should not, and causes this:

I think it might be the asynchronous behavior of setState, but I don't know how should I solve this problem.

If you have a solution or another way to achieve the expected behavior, please help!

Code here:

App.js: https://ghostbin.com/paste/e9wjg

Attack.js: https://ghostbin.com/paste/3zbwk

Answer 1

I know what i am wrong:

when I am dropping a object, I should move the index back:

   if (life>damage){
        players[index2].life = life-damage;}
    else {players=players.filter(player => player.id !== id2);
          this.setState({playerindex:this.state.playerindex-1});}

This problem is solved, however please give me advice on this project if you like!