我如何在React中div标记内的div标签内的数组元素之间循环 [英] How do I cycle through the elements of an array inside of a div tag one by one in React

问题描述

所以，我有一个巨大的二维数组.每个2d数组基本上都是我的回溯算法找到数独解决方案的一个步骤.我想找到一种在表格中显示每个步骤的方法.我已经有了CSS等.我只需要一种方法就可以在同一张表中一个接一个地循环执行所有步骤.像那些动画一样，解释了回溯是如何发生的.

So, I have a huge array of 2d arrays. Each 2d array is basically a step of my backtracking algorithm finding a sudoku solution. I want to find a way display each step in a table. I already have the css and all that. I just need a way to cycle through all of the steps, one after the other, in the same table. Kind of like those animations the explain how backtracking takes place.

有没有办法做到这一点?我认为您不需要任何代码，但是我将在控制台中粘贴2d数组数组的图片[我想您可以将其称为3d数组].

Is there a way I can do this? I don't think you need any code, but I'll paste a pic of the array of 2d arrays [I guess you can call it a 3d array] in the console.

PS:另外，直接使用document.getElementById('output').innerHTML在解决数独功能的函数中以及在useEffect Hook中的另一个for循环中均不起作用.

PS: Also, directly using document.getElementById('output').innerHTML is not working, both in the function that solves the sudoku itself, and in another for loop in useEffect Hook.

这是我到目前为止所拥有的.

This is what I have so far.

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)
        }
    }, [])

推荐答案

这个答案实际上是@ T.J用户给我的.人群他回答了这个简化为常规数组的问题，

This answer was actually given to me by User @T.J. Crowder. He answered this question that was simplified as a normal array, here.

假设这是一个功能组件，则需要在设置下一个状态之前让该组件呈现每个状态.否则，所有状态更新将被批处理在一起，并且只有在完成所有操作后，组件才会再次呈现.

Assuming this is a functional component, you need to let the component render each state before setting the next. Otherwise, all the state updates get batched together and the component only renders again when they're all done.

例如:

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

这篇关于我如何在React中div标记内的div标签内的数组元素之间循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！