如何在应用程序中将睡眠置于循环中

Question

我在index.js中有以下代码

class Main extends React.Component {    
    constructor(){
        super();
        this.state = {
            remainingBoxes : 0,
            gridFull: Array(this.rows).fill().map(() => Array(this.cols).fill({
                isVisited : false,
                isCurrent : false    
            }))
        }
    }

play = () => {
    // Temporary array to modify     
    let g2 = arrayClone(this.state.gridFull);
    while(condition){
       while(condition){
        /* Logic */
        // want to see change by applying
        this.setState({
        gridFull: g2,
        remainingBoxes: total,
       });
    /*    Changes will made here     */
      }

      while(condition){
        /* Logic */
        // want to see change by applying
        this.setState({
        gridFull: g2,
        remainingBoxes: total,
        });
   /*    Changes will made here     */
     } 

    }
}

我只是想在页面上看到2d数组中的所有更改。所以我使用setState来改变状态。在循环中，它会更快地改变状态。我希望逐一看到（1秒睡眠）。我使用 setinterval ，但循环不等任何人。我使用了异步功能但它没有用。所以你能建议任何方法将睡眠置于循环中，以便人类可以看到变化吗？