如何在React中一个一个地循环遍历div标签内的数组元素答案

【问题标题】：How do I cycle through the elements of an array inside of a div tag one by one in React如何在React中一个一个地循环遍历div标签内的数组元素
【发布时间】：2021-03-15 08:13:12
【问题描述】：

所以，我有一个 巨大的 二维数组数组。每个二维数组基本上是我的回溯算法找到数独解决方案的一个步骤。我想找到一种在表格中显示每个步骤的方法。我已经有了css和所有这些。我只需要一种方法来循环完成所有步骤，一个接一个，在同一张表中。有点像那些解释回溯是如何发生的动画。

有什么办法可以做到这一点吗？我认为您不需要任何代码，但我将在控制台中粘贴 2d 数组数组的图片 [我猜您可以将其称为 3d 数组]。

PS：另外，直接使用 document.getElementById('output').innerHTML 不起作用，无论是在解决数独本身的函数中，还是在 useEffect Hook 中的另一个 for 循环中。

这是我目前所拥有的。


function sleep(milliseconds) {
        const date = Date.now();
        let currentDate = null;
        do {
          currentDate = Date.now();
        } while (currentDate - date < milliseconds);
}

useEffect(()=>{
        results = solve(matrixx,n); //returns 3D array of format [[sudoku board],[sudoku board],[sudoku board]...], each sudoku board is a 2d array in which each element array is one row.
        console.log(results.length)
        var result = results.filter((i,idx) => results[idx-1] !== i) //Removes any duplicate sudoku boards right next to each other
        console.log(result)
        for(var k in result){
            document.getElementById('output').innerHTML = JSON.stringify(result[k]) //Tag with output is a div tag temporarily. I expected this code to fill the div tag with one sudoku board, wait for 10 milliseconds and then fill it with the next sudoku board in result. However, what really happens is wait for a long time and then fill the tag directly with the last sudoku board, which is also the solution to the sudoku problem. 
            sleep(10)
        }
    }, [])

【问题讨论】：

2d 和 3d 嵌套数组是有区别的。 JS 提供了一些原生的内置方法来提取任意深度的数组，但您需要了解您的数组是 2d 还是 3d。您能否发布一个数据结构示例和代码的 sn-p 以显示您在哪里遇到问题？
我的代码没有任何问题。我根本不知道从哪里开始......我的意思是，我从来没有见过或听说过做我想做的事，但我在解释回溯数独算法的网站上看到过这种情况。
数据结构在那张图中，但总之就是这样。 [[数独板],[数独板],[数独板],[数独板],[数独板],[数独板],...]

标签： javascript arrays reactjs multidimensional-array backtracking

【解决方案1】：

这个答案实际上是用户@T.J. 给我的。克劳德。他回答了这个被简化为普通数组的问题，here。

假设这是一个功能组件，你需要让组件在设置下一个状态之前渲染每个状态。否则，所有状态更新都会被批处理在一起，并且组件只有在它们全部完成后才会再次渲染。

例如：

    function Example() {
        const [arr, setArr] = useState([1,2,3,4,5,6,7,8,9,0]);
        // Set up a timer on mount, remove it on dismount and when
        // we run out of values to show
        useEffect(() => {
            const handle = setInterval(() => {
                // Note useing the callback function, so `arr` isn't stale
                // in this callback
                setArr(a => {
                    if (a.length) {
                        // Update the array, dropping the first entry
                        return a.slice(1);
                    }
                    // No more entries, stop the timer
                    clearInterval(handle);
                    return a;
                });
            }, 500);
            return () => clearInterval(handle);
        }, []);
        return <div>{arr.join()}</div>;
    }

【讨论】：