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

意大利面代码

我正在使用 reactjs 创建一个排序算法可视化工具。调用气泡排序函数后，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;

德鲁里斯

您正在改变list状态对象并将其保存回状态，因此list数组引用永远不会改变并且 React 重新渲染。

先浅拷贝，再更新。

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

有趣的事实：您可以使用数组解构赋值在一行中交换两个数组元素。