在React JS中this.setState的回调中使用this.setState吗? [英] Using this.setState in the callback of this.setState in React JS?
问题描述
是否可以在this.setState的回调中调用this.setState?
Is it possible to call this.setState in the callback of this.setState?
我正在制作类似Roguelike的Dungeon，并进行了设置，其中在this.setState的回调中使用了一个辅助函数，该函数再次调用this.setState.此时我的游戏停滞了.
I am making a Roguelike Dungeon and have a setup where in the callback of this.setState a helper function is used, that calls this.setState again. My game freezes at this point.
因此，我在React组件中有一个对象，该对象具有生成随机2D数组映射的方法:
So I have an object in the React component that has a method to generate a random 2D array map:
this.Dungeon.Generate();
游戏开始时，我们在componentDidMount()中调用组件中的以下函数:
When the game starts, we call in componentDidMount() the following function in the component:
componentDidMount: function() {
this.Dungeon.Generate();
this.setState({
board: this.Dungeon.map
}, function() {
this.generateGamePlay();
});
},
this.generateGamePlay()看起来像这样，基本上是随机生成并放置玩家，老板和物品在板上:
this.generateGamePlay() looks like this and basically generates and places the player, boss and items randomly on the board:
generateGamePlay: function() {
var board = this.state.board.slice();
var startPosition = this.randomPosition();
board[startPosition[0]][startPosition[1]] = this.state.player;
var bossPosition = this.randomPosition();
board[bossPosition[0]][bossPosition[1]] = this.state.boss[this.state.dungeonLevel];
this.generateWeapons(this.state.dungeonLevel,board);
this.generateFood(this.state.dungeonLevel, board);
this.generateEnemies(this.state.dungeonLevel, board);
this.setState({
board: board
});
},
但是当玩家死亡时，我们再次致电上面以重置游戏:
But when a player dies, we call above again to reset the game:
this.Dungeon.Generate();
//generate a new dungeon map, available in this.Dungeon.map
this.setState({
board: this.Dungeon.map, currentMessage: "Game restarted", player: player, weapon: weapon, dungeonLevel: 0
}, function(){
this.generateGamePlay();
})
但是那是我的游戏停滞的时候.因此，我第一次调用this.generateGamePlay()(调用this.setState)，但第二次冻结.有人可以帮助我吗?
But then is when my game freezes. So the first time I call this.generateGamePlay() (which calls this.setState) it works but the second time it freezes. Anyone can help me?
推荐答案
我将查看您在状态中设置this.Dungeon.map的部分.
I would look at the part where you are setting this.Dungeon.map in state.
this.setState({
board: this.Dungeon.map, currentMessage: "Game restarted", player: player, weapon: weapon, dungeonLevel: 0
}, function(){
this.generateGamePlay();
})
我的猜测是，由于它是Dungeon的属性，因此可能正在更改地图对象而不使用setstate.
my guess is that something else may be changing the map object and not using setstate since it is a property of the Dungeon.
来自反应文档
请不要直接更改this.state，因为之后可能会调用setState()替换您所做的突变.将this.state视为不变的.
Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.
当您将map属性传递给setstate时，它将保留对this.Dungeon.map的引用，如果您随后进行修改，则会导致问题.您应该复制曾经的.map并将其传递给状态.
when you pass the map property to setstate it will keep a reference to this.Dungeon.map which if you then modify will cause issues. You should make a copy of what ever .map is and pass that to state.
您还应该让一个组件负责状态，而不是在不同的函数中多次调用它.从反应文档
You should also make one component in charge of the state instead of calling it multiple times in different functions. From the react docs
setState()不会立即使this.state突变，但会创建一个等待状态转换.调用此后访问this.state方法可能会返回现有值.
setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value.
不能保证对setState的调用的同步操作并且可以批量调用以提高性能.
There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.
由于所有多个setstate调用，您的冻结可能是由于render方法中的竞争条件造成的.
your freezing could be from race conditions in the render method due to all the multiple setstate calls.
这篇关于在React JS中this.setState的回调中使用this.setState吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
