Reactjs React钩子，用于重新呈现由异步递归函数更新的状态

我正在构建一个react应用程序，它可以解决数独板问题，并可视化解决算法

我试图将类组件转换为功能组件，但不确定如何使状态更改生效

问题代码是：

  async solve() {
    await this.sleep(0);
    const board = this.state.board;
    for (let row = 0; row < 9; row++) {
      for (let col = 0; col < 9; col++) {
        if (board[row][col] !== 0) {
          // can't change filled cells
          continue;
        }
        // try 1 to 9 for the empty cell
        for (let num = 1; num <= 9; num++) {
          if (App.isValidMove(board, row, col, num)) {
            // valid move, try it
            board[row][col] = num;
            this.setState({ board: board });
            if (await this.solve()) {
              return true;
            } else {
              // didn't solve with this move, backtrack
              board[row][col] = 0;
              this.setState({ board: board });
            }
          }
        }
        // nothing worked for empty cell, must have deprived boards solution with a previous move
        return false;
      }
    }
    // all cells filled
    return true;
  }

async solve（）{
等待这个。睡眠（0）；
const board=this.state.board；
for（设行=0；行<9；行++）{
for（设col=0；col<9；col++）{
如果（板[行][列]！==0）{
//无法更改已填充的单元格
继续；
}
//空单元格尝试1到9
对于（让num=1；num setBoard（board），[board]）

）。此未编译，获取错误

React Hook“useffect”可能会执行多次…

也调查了

useReducer

，但是

---

我的问题是：

• 这甚至可以转换为功能组件吗
• 如果是，我应该使用什么钩子，它是否需要重新设计我的

  solve（）

  函数
• 将其从类组件转换为功能组件是最好的方法吗

---

你可以在每次棋盘更改时使用一个效果，该效果将运行。当没有更多移动时，棋盘将不会更改，该效果将不再运行

下面是一个如何做到这一点的示例：

const{useState，useffect}=React；
const getCell=（板）=>{
常量行=board.findIndex（（行）=>
行.部分（（单元格）=>！单元格.已选中）
);
如果（行==-1）{
返回[-1，-1，false]；
}
const col=board[row].findIndex（（单元格）=>！cell.checked）；
返回[行、列、真]；
};
常量初始状态=[
[{checked:false}，{checked:false}]，
[{checked:false}，{checked:false}]，
];
常量应用=（）=>{
const[board，setBoard]=使用状态（initialState）；
useffect（（）=>{
常量计时器=设置超时(
() =>
立根板（（板）=>{
常量[行、列、集]=getCell（板）；
如果（设置）{//我们需要设置板吗（有移动）
const boardCopy=[…board]；
boardCopy[行]=[…板[行]]；
董事会副本[行][列]={
…董事会副本[行][col]，
核对：对，
};
回执；
}
//这将返回与传入的相同的结果
//所以应用程序不会重新渲染，因为
//不会改变
return board；//由于set为false，所以没有向左移动
}),
1000
);
return（）=>clearTimeout（计时器）；
}[董事会]；
返回(
立板条（初始状态）}>
重置
{board.map（（行，i）=>(
{row.map（（{checked}，i）=>(
{选中？'X'：'O'}
))}
))}
);
};
ReactDOM.render（，document.getElementById（'root'）；

---

你可以在每次棋盘更改时使用一个效果。该效果将运行。当没有更多移动时，棋盘将不会更改，该效果将不再运行

下面是一个如何做到这一点的示例：

const{useState，useffect}=React；
const getCell=（板）=>{
常量行=board.findIndex（（行）=>
行.部分（（单元格）=>！单元格.已选中）
);
如果（行==-1）{
返回[-1，-1，false]；
}
const col=board[row].findIndex（（单元格）=>！cell.checked）；
返回[行、列、真]；
};
常量初始状态=[
[{checked:false}，{checked:false}]，
[{checked:false}，{checked:false}]，
];
常量应用=（）=>{
const[board，setBoard]=使用状态（initialState）；
useffect（（）=>{
常量计时器=设置超时(
() =>
立根板（（板）=>{
常量[行、列、集]=getCell（板）；
如果（设置）{//我们需要设置板吗（有移动）
const boardCopy=[…board]；
boardCopy[行]=[…板[行]]；
董事会副本[行][列]={
…董事会副本[行][col]，
核对：对，
};
回执；
}
//这将返回与传入的相同的结果
//所以应用程序不会重新渲染，因为
//不会改变
return board；//由于set为false，所以没有向左移动
}),
1000
);
return（）=>clearTimeout（计时器）；
}[董事会]；
返回(
立板条（初始状态）}>
重置
{board.map（（行，i）=>(
{row.map（（{checked}，i）=>(
{选中？'X'：'O'}
))}
))}
);
};
ReactDOM.render（，document.getElementById（'root'）；

让它与
useState
hook一起工作

问题是我没有正确复制板；需要使用
const boardCopy=[…board]；
（而不是
const boardCopy=board
）


.
让它与
useState
hook一起工作

问题是我没有正确复制板；需要使用
const boardCopy=[…board]；
（而不是
const boardCopy=board
）


.
嘿，你试过用
useAncyEffect
代替useAncyEffect吗？每当我有这样的异步钩子时，我就用这个npm包嘿，你试过用
useAncyEffect
代替useAncyEffect吗？每当我有这样的异步钩子时，我就用这个npm包