Question

我尝试搜索此问题，但是搜索完全为空。我对JS框架比较陌生。我现在正在处理的项目是带有ReactJS的排序算法可视化工具，该可视化工具应演示逐步进行不同排序的方式。但是，每次在排序函数中调用setArray（）函数（在useState挂钩中使用的那个函数）时，我都会重新呈现显示的数组。

最后还有关于该问题的录制视频。我正在使用

的高度进行排序。这是气泡排序实现：

    
    // The hook's definition
    const [ array, setArray ] = useState(generateArray(rangeVal));

    //---
    // Code inbetween
    //---

    const bubble_Sort = () => {
        let list = document.getElementsByClassName('array-container')[0];
        let realList = list.children;

        let swapp;
        let n = realList.length-1;
        let x = [...array];
        do {
            swapp = false;
            for (let i=0; i < n; i++)
            {
                let a = x[i].props.style.height;
                let b = x[i+1].props.style.height;

                if (a > b)
                {
                    console.log('inside');
                    let temp = x[i];
                    x[i] = x[i+1];
                    x[i+1] = temp;
                    swapp = true;

                    // This, I think, is the problematic part
                    newArray(x); // Shown below
                    sleep(10); // A custom sleep function I wrote that basically stalls the code
                }
            }
            n--;
        } while (swapp);
    }

这是newArray（）方法，该方法应在每次调用时更新屏幕上显示的数组

    const newArray = (newArray) => {
        setArray([...newArray]);
    }

我想像一下，每次交换2个值时，更新的数组将通过newArray（）方法显示在屏幕上，因为调用我的钩子的setArray（）函数应该重新呈现整个组件。

但是，发生的是整个组件保持冻结状态，直到对整个数组进行排序为止，并且仅在排序结束后才以其排序形式显示。

我不知道为什么会这样。我假设这与多个setArray（）调用不起作用有关，这些调用不能在单个函数中运行，但是即使是这样，我也无法提出解决方案。您的帮助将不胜感激。预先感谢。

我录制了一个视频，以防执行过程有所帮助： https://streamable.com/hbjk2z

编辑： 睡眠功能：https://i.ibb.co/p2CypFK/image-2020-11-13-015800.png

0 个答案:

没有答案

可以使用useState（）挂钩传递的函数在一个函数中多次重新渲染其组件吗？

0 个答案: