Javascript 直接调用函数draw时获得不同的输出？俄罗斯方块反应

我有一个绘图功能，它可以更新我的state.board。 当我用setTimeout通过游戏函数调用它时，我得到了预期的输出。 但当我试图直接调用它时，输出是不同的。 看起来在第二种情况下，直到这个.setState{board:newBoard}行，一切都正常工作。我的state.board未更新。你能告诉我为什么吗

class App extends Component {
    constructor(props) {
        super(props)

        this.state = {
            board: [
                [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            ],
            piece:
                [
                    [1, 0, 0],
                    [1, 0, 0],
                    [1, 1, 1]
                ],
        }
    }
    game = () => {
        this.gameID = setTimeout(this.draw, 10);
    }
    draw = () => this.state.piece.forEach((row, yPos) =>
        row.forEach((blockColor, xPos) => {
            if (blockColor !== 0) {
                const newBoard = this.state.board.map((row, y) => row.map((value, x) => {
                    if ((y === yPos && x === xPos && blockColor !== 0)) { return value = blockColor }
                    else { return value }
                }));
                this.setState({ board: newBoard }, console.log("newBoard ", newBoard, "   state.board ", this.state.board));
            }
        }))
render() {
    return (
        <Layout>
            <div className="game-area">
                <Board board={this.state.board} />

            </div>
            <button type="button" onClick={this.game}>Start</button>

            <button type="button" onClick={this.draw}>step</button>

        </Layout>
    )
}
}

export default App;

我通过直接调用draw获得：

0: (10) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
1: (10) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
2: (10) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
3: (10) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
4: (10) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
5: (10) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
6: (10) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
7: (10) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
8: (10) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
9: (10) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
10: (10) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
11: (10) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
12: (10) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
13: (10) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
14: (10) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
15: (10) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
16: (10) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
17: (10) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
18: (10) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
19: (10) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

我的板组件

import React from 'react';
class Board extends React.Component{
  render(){
  return (
   <div>
     {this.props.board.map((row,y)=>
       row.map((value,x)=>{

         const style ={
          top: (y*40) , left: (x*40),
          backgroundColor: 'red'
         }
         if(value===0){style.backgroundColor = 'blue'}
         else if (value ===1){style.backgroundColor = 'green'}
         else if (value ===2){style.backgroundColor = 'yellow'}
         //console.log("row: "+row+"x: "+x+"y: "+y);
         return(<div className = "block" style = {style}></div>)
       })
     )}
   </div>
  );
}}
export default Board;

Layout.js

    import React from 'react';

import Aux from '../hoc/Aux';

const layout = (props) => (
    <Aux>
    <div>Toolbar, SidePanel</div>
    <main>
        {props.children}
    </main>
    </Aux>

);

export default layout;

setState可以异步运行。这意味着调用This.setState后，This.state可能不会立即更新。因此，在更新后引用this.state是危险的，因为您将在每个循环迭代中再次引用预更新的数据。另外，setState会引发一个更新，您不希望启动多个更新来响应一个事件

我建议您只执行一个设置状态操作，类似这样的操作：

draw = () => {
  let newBoard = this.state.board;
  this.state.piece.forEach((row, yPos) => {
    row.forEach((blockColor, xPos) => {
      if (blockColor !== 0) {
        newBoard = newBoard.map((row, y) => row.map((value, x) => {
          if ((y === yPos && x === xPos && blockColor !== 0)) {
            return value = blockColor 
          } else { 
            return value 
          }
        }));
      }
    })
  });

  this.setState({
    board: newBoard
  }, () => { 
    console.log("newBoard ", newBoard, "   state.board ", this.state.board) 
  });
}

---

你能分享你的布局和电路板组件吗？@MattOestreich components addedIt如果你能提供一个代码沙盒或其他东西，那将非常有用。。。文章中的源代码是需要的，但是一个CodeSandbox或类似的东西可以让其他人更容易地提供帮助。。。更有可能通过这种方式快速得到答案。

draw = () => {
  let newBoard = this.state.board;
  this.state.piece.forEach((row, yPos) => {
    row.forEach((blockColor, xPos) => {
      if (blockColor !== 0) {
        newBoard = newBoard.map((row, y) => row.map((value, x) => {
          if ((y === yPos && x === xPos && blockColor !== 0)) {
            return value = blockColor 
          } else { 
            return value 
          }
        }));
      }
    })
  });

  this.setState({
    board: newBoard
  }, () => { 
    console.log("newBoard ", newBoard, "   state.board ", this.state.board) 
  });
}