当我在一个位置调用它的父函数时，this.SetState（）工作，但是当我在第二个位置调用它的父函数时，它不起作用

Question

基本上，我在两种情况下调用resetGame（）：当用户单击“开始”按钮时，以及当用户与敌人发生碰撞时（视觉上将其标记为感叹号;在handleReds（）中引用为“redSpot” ）。 resetGame（）适用于前一种情况，但不适用于后者。

Console.logging让我相信当我从handleReds（）中重置了一个（）时，resetGame（）中的所有代码都被执行 - 我无法让状态发生变化。我猜这与this.setState（）是异步的有关...但同样，resetGame（）在其他地方调用时效果很好。

import React from 'react'

class GridContainer extends React.Component {
    constructor(props) {
        super(props)
        this.state = {grid: Array(36).fill(null), currentScore: 0}
        this.resetGame = this.resetGame.bind(this)
        this.movePlayer = this.movePlayer.bind(this)
        this.handleReds = this.handleReds.bind(this)
    }

    resetGame() {
        this.setState(
            {grid: Array(36).fill(null), currentScore: 0}, 
            function() {
                let takenSpots = [0]
                let pieces = ['yellow', 'blue', 'red']
                for(let piece in pieces) {
                    piece = pieces[piece]
                    let randSpot = 0
                    while(takenSpots.includes(randSpot)) {
                        randSpot = Math.floor((Math.random() * 35) + 1)
                    }
                    takenSpots.push(randSpot)
                    var newGrid = this.state.grid
                    console.log(this.state.grid)
                    if(piece == 'yellow') {
                        newGrid[randSpot] = ':)'
                    } else if(piece == 'blue') {
                        newGrid[randSpot] = '*'
                    } else if(piece == 'red') {
                        newGrid[randSpot] = '!'
                    }
                    this.setState({grid: newGrid})
                }
            }
        )        
    }

    movePlayer(e) {
        let grid = this.state.grid;
        let arrows = [37, 38, 39, 40]
        if(arrows.includes(e.keyCode)) {
            for(let spot in grid) {
                spot = grid[spot]
                if(spot == ':)') {
                    var oldSpot = parseInt(grid.indexOf(spot))
                }
            }
            if(e.keyCode == 37) {
                var newSpot = oldSpot - 1
            } else if(e.keyCode == 38) {
                var newSpot = oldSpot - 6
            } else if(e.keyCode == 39) {
                var newSpot = oldSpot + 1
            } else if(e.keyCode = 40) {
                var newSpot = oldSpot + 6
            }
            this.handleReds(grid, newSpot)
            let newGrid = grid
            newGrid[newSpot] = ':)'
            newGrid[oldSpot] = null
            this.setState({grid: newGrid, currentScore: this.state.currentScore + 1})
        }
    }

    handleReds(grid, newSpot) {
        for(let spot in grid) {
            spot = grid[spot]
            if(spot == '!') {
                var redSpot = grid.indexOf(spot)
            }
        }
        if(newSpot == redSpot) {
            this.resetGame()
        }
    }

    render() {
        let grid = this.state.grid.map(spot => {
            return(
                <h1 className='spot'>{spot}</h1>
            )
        })
        return(
            <div>
                <button onClick={this.resetGame}>Start!</button>
                <input value='arrow keys to move' onKeyDown={this.movePlayer} />
                <h4>Moves: {this.state.currentScore}</h4>
                <div>{grid}</div>
            </div>
        )
    }
}

export default GridContainer