(React.js)为什么react找不到对象?

2022-01-19 00:00:00 reactjs frontend javascript

我是一个新手，正在学习使用 React.js 构建一个 rpg 游戏，我发现这部分非常混乱.

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

我正在尝试使用 onClick 更新 life，当 life<damage 时，对象 播放器 被丢弃.所以html看起来像这样:

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:

我觉得可能是setState的异步行为，但是不知道怎么解决这个问题.

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!

代码在这里:

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

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

推荐答案

我知道我错了:

当我删除一个对象时，我应该将索引向后移动:

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!

相关文章