Как обновить состояние React один раз за итерацию цикла

Question

Я создал программу решения лабиринта python и пытаюсь создать приложение React для ее визуализации. Я успешно соединил стороны python и основную c React, и я могу визуализировать лабиринтную часть программы. Проблема в том, что агент, решающий лабиринт, просто появится над целью вместо того, чтобы пробираться через лабиринт.

Лабиринт представляет собой сетку со случайным образом размещенными на ней препятствиями (на фото) Лабиринт с препятствиями

Я пытаюсь заставить агента, который представляет собой синий квадрат, перемещаться по лабиринту по одной плитке за раз, примерно каждые 100 мс. Данные, которые сторона React получает со стороны python, следующие:

Python проходит матрицу исходного лабиринта только с целью и препятствиями. Python затем передает массив, содержащий каждую из координат, к которой перемещается агент. EX. [[0,0], [0,1], [1,1], [2,1]]

React отображает исходную матрицу лабиринта с препятствиями и целями, но когда я пытаюсь пройти через массив координат для агента, он просто отображает каждую плитку, куда агент переместился сразу в конце (на фото) После изображения с показанными позициями агента Это новое поколение лабиринтов, препятствия не такие, как на первом изображении

Я знаю, что состояние React обновляется только один раз, в конце l oop. Я хочу найти способ, чтобы он обновлялся один раз за итерацию, при этом лабиринт сбрасывается в исходное состояние в начале каждой итерации, а затем размещается агент. То, что я считаю подходящим кодом, находится ниже

Действие запуска лабиринта (происходит после того, как пользователь нажимает кнопку)

startMaze = () => {
    this.state.apiClient.startMaze().then((data) => this.moveAgent(data));
};

Функция перемещения агента (Примечание: есть исходная матрица и текущая матрица. Текущая матрица - это то, что у меня есть, удерживая позицию агента с целью и препятствиями, исходная матрица просто имеет цель и препятствия)

moveAgent = (data) => {
    data.map((coords) => {
        var newMatrix = this.state.matrix;
        newMatrix[coords[0]][coords[1]] = 2;
        this.setState({ currentMatrix: newState });
        sleep(1000);
    });
};

Если для решения проблемы нужно что-то еще, просто дайте мне знать, и я добавлю это.

Answer 1

Думаю, вы могли бы использовать setTimeout, чтобы исправить вашу проблему. Может быть, что-то вроде этого:

moveAgent = (data) => {
   if(data.length < 1) return;

    var coords = data.shift();
    var newMatrix = this.state.matrix;
    newMatrix[coords[0]][coords[1]] = 2;
    this.setState({ currentMatrix: newState });
    setTimeout(() => { moveAgent(data); }, 1000);
};

сна не существует в JS. Итак, мы используем setTimeout, который вызывает функцию через заданное время (здесь 1000 мс, то есть 1 секунда). И мы используем его для повторного вызова функции, каждый раз используя и удаляя первый элемент массива.