Я создаю приложение для реагирования, которое решает доску судоку и визуализирует алгоритм решения.
Я пытаюсь преобразовать компоненты класса в функциональные компоненты, но не знаю, как заставить работать изменения состояния.
Проблемный код:
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
, чтобы я мог использовать sleep()
для визуализации алгоритма. Я использую this.setState({ board: board });
для запуска повторного рендеринга каждый раз, когда плата мутирует.
При попытке преобразовать в функциональный компонент я пробовал:
useState
, я использовалconst [board, setBoard] = useState(initialBoard);
и заменил вызовыthis.setState
наsetBoard(board)
. Это не сработало, потому что хук вызывается в цикле- обернув
useState
useEffect
(т.е.useEffect(() => setBoard(board), [board])
). Это не скомпилировалось, выдает ошибкуReact Hook "useEffect" may be executed more than once...
- также изучил
useReducer
, но читал, что он плохо работает сasync
Мои вопросы:
- Это вообще возможно преобразовать в функциональный компонент?
- Если да, то какой хук мне следует использовать и потребует ли это переделки моей функции
solve()
? - Лучше ли преобразовать это из компонента класса в функциональный компонент?
useAsyncEffect
вместо useEffect? Я использую этот пакет npm всякий раз, когда у меня есть асинхронные хуки, подобные этой npm link - person mcmohorn   schedule 01.05.2020