Question

我已经构建了一个迷宫解决python程序，并且我正在尝试制作一个React应用来对其进行可视化。我已经成功地连接了我拥有的python端和基本的React端，并且可以看到程序的迷宫部分。问题是解决迷宫的代理只会出现在目标上方，而不是通过迷宫前进。

迷宫是一个随机放置障碍物的网格（如图所示） Maze with Obstacles

我正在尝试使该代理程序（它是一个蓝色方块）一次大约每100毫秒一次穿过迷宫。 React端从python端获取的数据如下：

Python仅通过目标和障碍物传递初始迷宫矩阵
然后，Python传递一个数组，该数组包含代理移动到的每个坐标
例如[[0,0]，[0,1]，[1,1]，[2,1]]

React显示了带有障碍物和目标的初始迷宫矩阵，但是当我尝试遍历代理的坐标数组时，它仅显示代理在最后一次全部移动的每个单个图块（如图所示） After image with agent positions shown 这是新一代的迷宫，障碍物与第一张图片不同

我知道，在循环结束时，React状态仅更新一次。我想找到一种方法，使它每次迭代更新一次，在每次迭代开始时将迷宫重置为原始状态，然后放置代理。我认为相关代码如下

开始迷宫动作（在用户按下按钮后发生）

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

sleep在JS中不存在。所以我们在这里使用的是setTimeout，它在给定的时间（此处为1000ms，即1秒）后调用一个函数。然后，我们使用它再次调用函数，每次使用并删除数组的第一个元素。

如何在每次循环迭代时更新一次React状态

1 个答案: