Javascript ReactJS：状态更改时更新UI

我对ReactJS比较陌生，我正在尝试创建一个数独解算器

当我更新状态时，我希望UI也更新，因此用户可以看到算法在做什么

用我当前的代码，用户界面只在最后更新，一次填满整个数独板

我尝试在很多地方使用

setTimeout（）

，但都没有成功

这是我的反应课：

import React from 'react';
import './App.sass';
import Button from '@material-ui/core/Button';

export default class App extends React.Component {
  constructor() {
    super();
    this.state = { board: [
        ["5","3",".",".","7",".",".",".","."],
        ["6",".",".","1","9","5",".",".","."],
        [".","9","8",".",".",".",".","6","."],
        ["8",".",".",".","6",".",".",".","3"],
        ["4",".",".","8",".","3",".",".","1"],
        ["7",".",".",".","2",".",".",".","6"],
        [".","6",".",".",".",".","2","8","."],
        [".",".",".","4","1","9",".",".","5"],
        [".",".",".",".","8",".",".","7","9"]
      ]
    };
  }

  createTable = () => {
    let table = [];

    for(let row = 0; row < this.state.board.length; row++) {
      let children = [];

      for(let col = 0; col < this.state.board[0].length; col++) {
        children.push(<td>{this.state.board[row][col]}</td>)
      }
      table.push(<tr>{children}</tr>)
    }
    return table
  }

  solveSudoku = board => {
    for(let row = 0; row < board.length; row++) {
        for(let col = 0; col < board[row].length; col++) {
          if(board[row][col] === '.') {
            for(let num = 1; num <= 9; num++) {
              // Check if valid
              if(this.isValid(board, row, col, num)) {
                board[row][col] = num.toString();
                this.setState(board);

                if(this.solveSudoku(board)) {
                  this.setState(board);
                  return true;
                } else {
                  board[row][col] = '.';
                  this.setState(board);
                }
              }
            }
            return false;
          }
        }
      }
      return true;
  }

  isValid = (board, row, col, num) => {
    for(let i = 0; i < 9; i++) {
      // Check row
      if(parseInt(board[row][i]) === num) {
        return false;
      // Check column
      } else if(parseInt(board[i][col]) === num) {
        return false;
      // Check Subgrid
      } else if(parseInt(board[3 * (Math.floor(row / 3)) + Math.floor(i / 3)][3 * (Math.floor(col / 3)) + i % 3]) === num) {
        return false;
      }
    }
    return true
  }

  render() {
    return (
      <div className="App">
        <table>
          <tbody>
            {this.createTable()}
          </tbody>
        </table>
        <Button variant="contained" color="primary" onClick={() => this.solveSudoku(this.state.board)}>Solve</Button>
      </div>
    );
  }
}

从“React”导入React；
导入“/App.sass”；
从“@material ui/core/Button”导入按钮；
导出默认类App扩展React.Component{
构造函数（）{
超级（）；
this.state={板：[
["5","3",".",".","7",".",".",".","."],
["6",".",".","1","9","5",".",".","."],
[".","9","8",".",".",".",".","6","."],
["8",".",".",".","6",".",".",".","3"],
["4",".",".","8",".","3",".",".","1"],
["7",".",".",".","2",".",".",".","6"],
[".","6",".",".",".",".","2","8","."],
[".",".",".","4","1","9",".",".","5"],
[".",".",".",".","8",".",".","7","9"]
]
};
}
createTable=（）=>{
设table=[]；
for（让row=0；row{
for（设行=0；行Solve
);
}
}

在状态更改或道具更改时，UI会自动重新启动。 看起来您的状态设置不正确

setState应该包含一个新的状态实例，它是一个对象。

---

所以应该是这样的：this.setState（{newState}）；

您的状态也应该是不可变的，所以您希望将您的板复制到一个新对象中，而不是修改this.state.board.const newBoard={…board}，然后您可以修改newBoard并调用此.setState（{board:newBoard}）我尚未阅读您的所有代码，但您可能应该调用

this.setState（{board}）

而不是

this.setState（board）

。非常简单的解决方法可能是在更新函数的入口将状态设置为空。@dev_junwen我更新了我的代码，但它仍然不起作用。我复制了您的代码并进行了测试，它似乎起作用了fine@dev_junwen用户界面是否一次更新每个数字，因此用户可以看到算法在做什么？