ReactJS：状态更改时更新 UI

Question

我是 ReactJS 的新手，我正在尝试创建一个数独求解器。

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

使用我当前的代码，UI 仅在最后更新并立即填满整个数独板。

我尝试在很多地方使用setTimeout()，但没有成功。

这是我的 React 类：

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

Answer 1

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

setState 应该包含一个新的 state 实例，它是一个对象。 所以应该是这样的：this.setState({newState});