Javascript 无法在React.js中使用useState进行渲染

我正在使用reactjs创建一个排序算法可视化工具。调用函数bubblesort后，useState更新列表，从而触发重新渲染。但新列表不会注入dom。实现是使用（功能组件）和一些挂钩完成的。 -新来的人

下面是代码片段

import React, { useEffect, useState } from 'react';


const ArrayBars = ()=>{

const [list, setlist] = useState([]);


function BubbleSort(){
    let arr=list
    for(var i=0;i<arr.length-1;i++){
        for(var j=i+1;j<arr.length;j++){
            if(arr[i] > arr[j]){
                let temp = arr[i];
                arr[i]=arr[j];
                arr[j]=temp;
            }
        }
    }
    setlist(arr)
}


    // Generate an array:
    function generatearray(){
        const sliderValue=document.getElementById('slide').value;
        const arr = []
        for(let i=0;i<sliderValue;i++){
            const Bar_height = Math.floor(Math.random() * (760 - 400 + 1) ) + 400;
            arr.push(Bar_height);
        }
        setlist(arr);
    }

    return(
        <div>
            <div className="header mt-4 p-3 mb-3">
                <div className="slider">
                    <label>array Size :</label>
                    <input type="range" min="10" max="100" id="slide" ></input>
                    <button type="button" className="btn btn-success" onClick={generatearray}>Generate array</button>
                </div>
                <div className="btns">
                    <button type="button" className="btn btn-outline-info p-3" onClick={BubbleSort}>Bubble Sort</button>
                    <button type="button" className="btn btn-outline-info p-3">Selection Sort</button>
                    <button type="button" className="btn btn-outline-info p-3">Insertion Sort</button>
                    <button type="button" className="btn btn-outline-info p-3">Merge Sort</button>
                    <button type="button" className="btn btn-outline-info p-3">Quick Sort</button>
                </div>
            </div>
            <div className="array px-5 d-flex justify-content-center">
                {                   
                    list.map((height,idx)=>{
                        return(
                            <div id={idx} className="bars" style={{height:`${height}px`}}></div>
                        )
                    })
                }

            </div>
        </div>
    )
}

export default ArrayBars;

import React，{useffect，useState}来自“React”；
常量数组条=（）=>{
const[list，setlist]=useState（[]）；
函数BubbleSort（）{
设arr=list
对于（var i=0；i您正在变异
列表
状态对象并将其保存回状态，因此
列表
数组引用永远不会更改，并在重新排序时作出反应

先复制它，然后更新它

function BubbleSort(){
    let arr = [...list]; // <-- shallow copy state array
    for (let i = 0; i < arr.length - 1; i++) {
        for (let j = i + 1; j < arr.length; j++) {
            if (arr[i] > arr[j]) {
                let temp = arr[i];
                arr[i] = arr[j];
                arr[j] = temp;
            }
        }
    }
    setlist(arr)
}

如果我们将列表设置如下：setlist（[…arr]）@spaghetticode如果您一直等到那时才进行浅层复制，那么您将变异对
列表的引用，这是先前状态的一部分。变异可能会产生意外的副作用。
[arr[j], arr[i]] = [arr[i], arr[j]];