时间戳

首页 > 解决方案 > 如何在每次循环迭代时更新 React 状态

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

问题描述

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

迷宫是一个网格，上面随机放置障碍物（如图） 有障碍的迷宫

我试图让代理（这将是一个蓝色方块）一次通过迷宫一个瓷砖，大约每 100 毫秒。React端从python端获取的数据如下：

Python 传递带有目标的初始迷宫矩阵，只有障碍物
Python 然后传递一个数组，其中包含代理移动到
EX 的每个坐标。[[0,0],[0,1],[1,1],[2,1]]

React 显示带有障碍物和目标的初始迷宫矩阵，但是当我尝试遍历代理的坐标数组时，它只显示代理最后一次全部移动的每个图块（如图所示）显示的代理位置 这是新的迷宫生成，障碍物与第一张图像不同

我知道 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);
    });
};

如果还有其他需要解决的问题，请告诉我，我会添加它。

标签： pythonreactjsloopsstate

解决方案

我想你可以用它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 秒）之后调用一个函数。我们用它再次调用函数，每次都使用和删除数组的第一个元素。

推荐阅读