javascript - Using this.setState in the callback of this.setState in React JS? - Stack Overflow

admin管理员组

文章数量:1353179

Is it possible to call this.setState in the callback of 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.

So I have an object in the React ponent that has a method to generate a random 2D array map:

this.Dungeon.Generate();

When the game starts, we call in ponentDidMount() the following function in the ponent:

ponentDidMount: function() {

    this.Dungeon.Generate();

    this.setState({
      board: this.Dungeon.map
    }, function() {

      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();

          })

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?

Is it possible to call this.setState in the callback of 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.

So I have an object in the React ponent that has a method to generate a random 2D array map:

this.Dungeon.Generate();

When the game starts, we call in ponentDidMount() the following function in the ponent:

ponentDidMount: function() {

    this.Dungeon.Generate();

    this.setState({
      board: this.Dungeon.map
    }, function() {

      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();

          })

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?

• javascript
• reactjs
• callback
• setstate

Share Improve this question Follow asked Jan 9, 2017 at 9:21 chemook78chemook78 1,19833 gold badges1818 silver badges3939 bronze badges 1

• 2 Yes, you can call setState() within the callback of another setState(). The freezing is most likely unrelated to the callback itself. – Chris Commented Jan 9, 2017 at 9:47

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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();

          })

my guess is that something else may be changing the map object and not using setstate since it is a property of the Dungeon.

from the react docs

Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.

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 ponent in charge of the state instead of calling it multiple times in different functions. From the react docs

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.

There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

your freezing could be from race conditions in the render method due to all the multiple setstate calls.

Like Frank's code I have this:

this.setState( state => {
  state.board = this.Dungeon.map
  return state
})

I hope It would be handy for you, or maybe I'm doing it wrong, or misunderstanding your question

本文标签： javascriptUsing thissetState in the callback of thissetState in React JSStack Overflow